CSS3: Tooltip Max Width with Word Wrap - html

Question

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

Answer 1

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;
}

Answer 2

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;
}

Answer 3

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;
}

Answer 4

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: