Menu
I want to make a custom CSS class for tooltip which will wrap a string of length more than 25-30.Usually such a long text doesn't fit into the tootltip text area.
And is there anyway to do this using Tooltip (ui.bootstrap.tooltip) ? Like using custom CSS class to get the desired output.
This is the simple css tooltip - Plunker DEMO
Here is the code Snippet for the same :
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
max-width:100px;
padding:15px;
min-height:30px;
background:#fff;
visibility: hidden;
border: 1px solid black;
color: #000;
text-align: center;
border-radius: 6px;
/* 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 1
<span class="tooltiptext">Tooltip text</span>
</div>
<div class="tooltip">Hover over me 2
<span class="tooltiptext">Array [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,,1,11,1,1,1,11,1,,1,1,1,1,1,1,1,1,1,1,1,1,1,1]</span>
</div>
</body>
837
The CSS Solution
There is a very simple solution to the problem at hand. What I essentially added is the following CSS code
word-wrap:break-word;
to the class that surrounds your tooltip text.
Here is a working demo
Also, this is a good read
What if I am using Angular UI?
For styling a tooltip from angular ui, I added tooltip-class="tooltip" to the tooltip code.
Here is a working demo with angular
This is a modified plunkr obtained from the Angular UI documentation
200
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
