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
Related
I have a text with a tooltip in the box. I cannot change the properties of the box itself, but I would like to make it so that the tooltip is above the text. Here is what I have now:
.tt-container .tooltiptext {
display: none;
background-color: white;
border-style: solid;
position: absolute;
border-color: #1a7bc9;
color: #000;
text-align: left;
border-radius: 6px;
padding: 15px 15px;
width: 300px;
/*bottom: 100%;*/
}
.tt-container:hover .tooltiptext {
display: block;
}
.tt-container {
border-style: solid;
display: inline;
}
.box {
/*I cannot make changes to this*/
width: 200px;
height: 200px;
border-style: solid;
border-color: red;
overflow: auto;
}
<div class="box"><br><br>
<div class="tt-container">
<span class="tooltiptext">some more text which takes a bunch of space maan</span>
text
</div>
</div>
I think that the best way to achieve what I want would be doing bottom: 100% inside tooltip-text, but when I do so, the bottom is computed relative to the bottom of the page, not the bottom of the tt-container. I figure that this is because I have to use position: relative on the tt-container, but this will make it so that the tooltip is covered under the edge of the box. I have tried creating another div outside the tt-container with position: relative, but the result is the same and I don't know of any other ways. Is it possible to make this happen?
.tt-container .tooltiptext {
display: none;
background-color: white;
border-style: solid;
position: absolute;
bottom:100%;
border-color: #1a7bc9;
color: #000;
text-align: left;
border-radius: 6px;
padding: 15px 15px;
width: 300px;
}
.tt-container:hover .tooltiptext {
display: block;
}
.tt-container {
border-style: solid;
display: inline;
position:relative;
}
.box {
/*I cannot make changes to this*/
width: 200px;
height: 200px;
border-style: solid;
border-color: red;
overflow: auto;
}
<div class="box"><br><br>
<div class="tt-container">
<span class="tooltiptext">some more text which takes a bunch of space maan</span>
text
</div>
</div>
You should make the parent position: relative for position:absolute to know that it should be positioned relative to the parent.
It's not possible to make the tooltip go out of the box, because it has overflow: auto;.
I have an icon that when hovered over displays a tooltip blurb. I've fashioned it based on the W3Schools CSS tooltip example.
Here's the code:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
/* I WANT THIS TO CHANGE BASED ON TEXT LENGTH */
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Some fairly long tooltip text that should <br /> only display on two lines.</span>
</div>
</body>
My problem is that the text that appears in the tooltip is generated dynamically and may be wider than the static 120px width of the blurb. I want the width of the blurb to adjust based on the width of the text but if I set the width to auto, it only stretches as wide as the first word. How do I make that width change?
Just set white-space: nowrap; instead of setting width on .tooltip .tooltiptext
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
white-space: nowrap; /* this is new */
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Some fairly long tooltip text that should <br /> only display on two lines.</span>
</div>
</body>
The following will keep a minimum 120px wide tooltip, as well as prevent text from wrapping on its own ( <br> tags will need to be used for linefeeds). It also will break/look ugly if the message is too long.
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
min-width: 120px; /* min-width makes sure it will always be at least 120px */
white-space: nowrap; /* Prevents text from wrapping on its own */
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Some fairly long tooltip text that should <br /> only display on two lines.</span>
</div>
</body>
</html>
I try to view show modal window. This window contain multiple span. But there are limited by width and height. And when span content is smaller, than span width: all is OK, I can see this icon.
But when text is to big I could not see this icon. And I didn't have any ideas, how to do this on pure CSS without using Javascript (jQuery).
HTML:
<div class="wrapper">
<span class="first">First</span>
<br/>
<span class="second">Second contain a lot of text. Really long span is here</span>
</div>
CSS:
.wrapper{
width: 300px;
height: 500px;
background: green;
overflow: hidden;
}
span{
display: inline-block;
width: 236px;
height: 30px;
line-height: 30px;
font-size: 16px;
padding: 0px;
margin: 10px 20px;
padding: 0 16px 0 8px;
white-space: nowrap;
overflow: hidden;
background: #fc0;
text-overflow: ellipsis;
border: 1px solid green;
border-radius: 4px;
}
span:hover{
border: 1px solid blue;
cursor: pointer;
}
span:hover::after{
font: normal normal normal 12px FontAwesome;
line-height: 30px;
content: "\f040";
float: right;
}
First screen, first span: it's OK
Second screen, second span: it's not normal
Third screen, second span: so must be
Have any ideas? Also padding, margin must be "user-friendly" and the same in both cases.
Try it here:
http://codepen.io/anon/pen/KpMdvx
.wrapper {
width: 300px;
height: 500px;
background: green;
overflow: hidden;
}
span {
display: inline-block;
width: 236px;
height: 30px;
line-height: 30px;
font-size: 16px;
padding: 0px;
margin: 10px 20px;
padding: 0 16px 0 8px;
white-space: nowrap;
overflow: hidden;
background: #fc0;
text-overflow: ellipsis;
border: 1px solid green;
border-radius: 4px;
}
span:hover {
border: 1px solid blue;
cursor: pointer;
}
span:hover::before {
font: normal normal normal 12px FontAwesome;
line-height: 30px;
content: "\f040";
float: right;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="wrapper">
<span class="first">First</span>
<br/>
<span class="second">Second contain a lot of text. Really long span is here</span>
</div>
Because your text has a whitespace: nowrap; setting and is reaching the end of the box, this won't work without using position: absolute; on the icon. Just give the span position: relative; and apply an extra right-padding on hover.
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>
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: