I am trying to create a css tool-tip, the html and css code and also link to fiddle is given below
CHECK MY CODE HERE #JSFIDDLE
HTML
<a class="tooltip" href="#">CSS Tooltips 1
<span>Tooltip1</span></a>
</br>
<a class="tooltip" href="#">CSS Tooltips
<span>Tooltip This is not working for me </span></a>
CSS
.tooltip {
position: relative;
}
.tooltip span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
.tooltip span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #000000;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.tooltip:hover span {
display: block;
opacity: 0.8;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
My issue is only half the text from <span>Tooltip This is not working for me </span> is shown in the corresponding tool-tip. I tried hard but couldn't debug it. Please help.
Thanking You
It's because you have a fixed width. To allow the tooltip to dynamically expand to the content's width remove the width property and set white-space:nowrap to keep the text inline.
.tooltip span {
position: absolute;
color: #FFFFFF;
background: #000000;
white-space: nowrap;
height: 30px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
http://jsfiddle.net/89rwu2db/3/
EDIT
As commented bellow, if you want to keep the fixed width, but wants the text to expand in height, remove the height property of the span, and it will grow (also, don't use white-space anymore):
.tooltip span {
position: absolute;
color: #FFFFFF;
background: #000000;
width:140px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
http://jsfiddle.net/89rwu2db/9/
The point is, setting a specific width or height prevents your element of growing automatically.
You need to change the width property of the second tooltip to fit all the text you want display.
Fixed Fiddle: http://jsfiddle.net/89rwu2db/8/
I added styling to the second span to increase the width.
<span style="width: 250px;">Tooltip This is not working for me </span>
Related
i have created a tooltip the data its showing is getting overflowed. so want to fit the content inside the width of the tooltip. its more of the badge on hover i need to show the content also we can have a max width of 500px and height no restrictions. Also you could see that on hover the tooltip is not coming exactly down of the respective item on which it is hovered. This is what i have tried, below is my code
.lightgrey-badge {
width: auto;
height: 20px;
padding: 0px 8px 0px 8px;
border-radius: 4px;
background-color: #f2f2f2;
}
.lightgrey-badge-text {
font-size: 12px;
font-weight: 600;
text-align: center;
color: #595959;
vertical-align: middle;
}
.border {
border-radius: 20px;
border: solid 2px #595959;
}
.lightgrey-badge-text-elipses {
display: inline-block;
max-width: 40px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tooltiptext {
visibility: hidden;
max-width: 250px;
height: 50px;
opacity: 0.6;
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.04);
background-color: #000000;
color: #ffffff;
text-align: center;
border-radius: 6px;
position: absolute;
z-index: 9999;
margin-top: 28px;
margin-left: -150px;
}
.tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.lightgrey-badge:hover .tooltiptext {
visibility: visible;
}
<span
class="lightgrey-badge border"
style="margin-right: 5px"
>
<span
class="lightgrey-badge-text lightgrey-badge-text-elipses"
>Element
<span class="tooltiptext">
<span style="width: fit-content"> this s the dummy data the orifinal will look something like this a big long test.i have created a tooltip the data its showing is getting overflowed. so want to fit the content inside the width of the tooltip</span></span
>
</span>
</span>
The reason for the element is not in the proper width is that it should increase the max-width. I changed the max width to 50px. it was at 40px
.lightgrey-badge-text-elipses {
max-width: 50px;
}
I added a min-width, max-width and padding for the long text as follows
.tooltiptext {
min-width: 100px;
max-width: 500px;
padding-left: 100px;
padding-right: 50px;
}
You can break the lines of the paragraph to get the long text in different lines so you can see the entire thing. Like this
<span class = "new-content"><span style="width: fit-content"> this s the dummy data the orifinal will look something like this a big long test.i have created a tooltip the data its showing is getting overflowed. so want to fit the content inside the width of the tooltip</span></span></span>
You will have to add a class in the css too.
.new-content {
white-space: pre-wrap;
}
Try this code It will help you
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
display: block;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<br><br>
<div class="tooltip">Hover over me Hover over me
<span class="tooltiptext">blah bla blaa a bal blak a ba b alj ang</span>
</div>
<br><br>
<div class="tooltip">Hover over me Hover over me 3
<span class="tooltiptext">askdjf ksfjlskd flsaa flsjdlfj sdfk sadkjflskd af sdkjf lsdkf sdljf</span>
</div>
</body>
</html>
Verify my answer if it's work for you
This question already has answers here:
Keep width when using letter-spacing on hover
(2 answers)
Closed 2 years ago.
i try something when i hover my button. Currenttly that's my code
.btn {
border:solid 1px purple;
color:purple;
background: white;
padding:10px 15px;
text-align: center;
transition: .5s;
}
.btn:hover{
letter-spacing: 1px;
}
<button class="btn">My bouton</button>
The problem is, when i hover my button, the text expand, the button expand too on the right.
I want to make button not expand (keep original size), only text inside expand and centerized, without put a width size, because i want it as component (I would never know the size of the text.)
ALL in css only.
The only one way i've find is to add a data attribute who come over, but i don't like this way because i reapt my text 2 times.
For you it's possible only CSS ? if yes how ? Thanks a lot
Hide the original button text and use it inside the after/before using below CSS rules.
.btn {
border: solid 1px purple;
color: white;
background: white;
padding: 10px 15px;
text-align: center;
position: relative;
}
.btn:hover::after{
letter-spacing: 1px;
}
.btn::after{
content: 'My Button';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
color: purple;
transition: 0.5s;
}
<button class="btn">My bouton</button>
use absolute positioning on the text element and set it relative to the button element
edit:
.btn {
position: relative;
border: solid 1px purple;
color: purple;
background: white;
padding: 10px 15px;
text-align: center;
transition: .5s;
width: 5em;
}
.btn:hover {
letter-spacing: 1px;
}
span {
//position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
<button class="btn">
<span>My button</span>
</button>
Most easy solution would be to give the button a width... but you don't want that.
As an alternative, you can play with the padding-left and padding-right.
In normal state, you give it some more padding, on hover state, bring it back to 15px.
Note: changing the text length will affect the width, the padding then needs to be adjusted too...
.btn {
border:solid 1px purple;
color:purple;
background: white;
padding:10px 20px 10px 19px;
text-align: center;
transition: .5s;
}
.btn:hover{
letter-spacing: 1px;
padding-right: 15px;
padding-left: 15px;
}
<button class="btn">My bouton</button>
As long as the button width is determined by the text width you can only try to manipulate the padding so it fits again.
If its no problem to give the button a width depending on its parent or a fixed width you can try this:
.btn {
border:solid 1px purple;
color:purple;
background: white;
padding:10px 15px;
text-align: center;
transition: .5s;
width: 95px;
}
.btn:hover{
letter-spacing: 1px;
}
<button class="btn">My bouton</button>
<a class="ctooltip" tooltip="Definition:1000 characters here
onclick="openDocumentTypeHistory(2110)" href="#" >mytestdocument</a>
my css function
.ctooltip{
display: inline;
position: relative;
}
.ctooltip:hover:after{
background: #F5F5F5;
border-radius: 2px;
border-color: #000000;
border-style: ridge;
border-width: 1px;
top: 26px;
text-decoration: none;
color: #1d3030;
left: 20%;
content: attr(tooltip);
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
max-width: 220px;
}
a:hover {text-decoration: none; }
i wanna display the entire tooltip message which is 1000 characters long without having the user to scroll down the page to see the tooltip content
Just increase your tooltip width. 1000 characters are take too much height with 220px width. so you just need to increase your tooltip width for reduce height.
I'm trying to create a div that has a left and top border with text in top line. what I am trying to achieve is the following...
html half box
I am able to get the top with the text using the following css or alternately a table but can't get it with the left border also. any 'outside the box' thinkers?
.hr-sect {
display: flex;
align-items: center;
color: blue;
margin: 8px 0px;
}
.hr-sect::before
{
content: "";
width: 20px;
background: #000;
height: 1px;
font-size: 0px;
line-height: 0px;
margin: 0px 8px;
}
.hr-sect::after {
content: "";
width:100%;
background: #000;
height: 1px;
font-size: 0px;
line-height: 0px;
margin: 0px 8px;
}
CATEGORY
CATEGORY
You can simulate that interrupted border line by using an absolutely placed div that has a non-transparent background, just make sure it matches the actual background color.
.half-box {
border-left: 1px solid black;
border-top: 1px solid black;
position: relative;
padding: 30px;
}
.half-box > .title {
background-color: white;
padding: 0 10px;
position: absolute;
top: 0;
left: 30px;
font-size: 20px;
transform: translateY(-50%);
}
<div style="height: 100px">
</div>
<div class="half-box">
some content
<div class="title">
CONTENT
</div>
</div>
Set a positioning context on the outer box with position: relative;
For the border, use a pseudo ::before element with content: " "; and give it a position: absolute; to take it out of the flow. Give it a top and left border.
For the heading, also use position: absolute; and move it up with top: -20px or whatever. Set the same background color as the outer box to mask the border.
Adjust your margins and paddings as needed.
See this codepen: https://codepen.io/matthewsmith_io/pen/RVYQqy
Trying to apply max-width in case of text wrap for tooltip in this jsfiddle, but it applies the default width.
HTML:
<div id="container" style="margin: 167px 135px 0px 0px; height: 400px">
<a class="tooltip" tip="television">content1</a>
<a class="tooltip" tip="By noon yesterday, news television screens were filled with visuals of a Delhi we have been familiarized with over the past year.">content2</a>
</div>
CSS:
.tooltip{
display: inline;
position: relative;
white-space: pre-wrap; /* css-3 */
margin: 20px 20px 20px 20px;
height: 30px;
width: 50px
}
.tooltip:hover:after{
background: #8FBC8F;
border-radius: 5px;
bottom: 26px;
color: #000;
content: attr(tip);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width:auto;
min-width:50px;
max-width:500px;
}
.tooltip:hover:before{
border: solid;
border-color: #8FBC8F transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
when the text in the tooltip is getting word wrapped, width should go up to some max width instead of the default width so that it is convenient for reading.
this jsfiddle works when i put display: inline-table; like below
.tooltip:hover:after{
:
:
display: inline-table;
}
But it works only in Chrome and not on IE
You have to use display:inline and max-width and for some browser use word wrap.There is a good tutorial to create css3 tooltip create css3 tooltip.
Here's some code from that tutorial:
.tooltip
{
display: inline;
position: relative;
}
.tooltip:hover:after
{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
max-width: 220px;
}
Stumbled upon the same problem, and after some fiddling found following workaround for my case: you have to wrap tooltip content in another element, which will have your expected max-width for the tooltip in width, and positioned absolute. Then wrapped content will use this as baseline max width while wrapping text.
Verified that it works in latest public IE/Edge/Chrome/FF at the time of writing
Codepen: https://codepen.io/jfhs/pen/LzbwgJ
In code:
<div class="tooltip">
<div class="tooltip-content-wrapper">
<div class="tooltip-content">Long long text</div>
</div>
</div>
CSS:
.tooltip {
position: relative;
}
.tooltip-content-wrapper {
position: absolute;
width: 100px; /* THIS is your max-width for tooltip */
visibility: hidden;
}
.tooltip:hover .tooltip-content-wrapper {
visibility: visible;
}
.tooltip-content {
display: inline-block;
}
Please change your CSS min-width and max-width like below:
.tooltip:hover:after{
background: #8FBC8F;
border-radius: 5px;
bottom: 26px;
color: #000;
content: attr(tip);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width:auto;
min-width:500px; /* I have changed here */
max-width:500px;
}
I came across this old question as I too was looking to see if it was possible to get min-width and max-width to work without having to add JavaScript or extra elements (as I was sourcing the tooltip text from an attribute). It turns out that changing width: auto; to width: max-content; in your jsfiddle does the trick (as suggested at: https://stackoverflow.com/a/62853552). Screenshot: