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>
