I am experimenting with adding tooltips to my forum posts. Short tooltips work fine, but longer ones are causing issues by cutting off text. Changing the position property from relative to absolute fixes this problem, but causes the text to overlap.
Here is the CSS code I am using:
div.bb-tooltip {
display: inline-block;
border-bottom: 1px dotted black;
}
[data-tooltip] {
position: relative;
}
[data-tooltip]:before,
[data-tooltip]:after {
display: none;
position: absolute;
top: 0;
}
[data-tooltip]:before {
border-bottom: .6em solid black;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
left: 20px;
margin-top: 1em;
}
[data-tooltip]:after {
background-color: black;
border: 4px solid #010101;
border-radius: 7px;
color: #ffffff;
content: attr(data-tooltip-message);
left: 0;
margin-top: 1.5em;
padding: 5px 15px;
white-space: pre-wrap;
max-width: 350px;
}
[data-tooltip]:hover:after,
[data-tooltip]:hover:before {
display: block;
}
The HTML of the message:
very very <div class="bb-tooltip" data-tooltip data-tooltip-message="this is a long text! the quick brown fox jumps over a lazy dog! lorem ipsum dolor sit amet. Very very long text!">looooooooonnnnnnngggggg</div> tooltip! text text text
(adapted from: https://codepen.io/trezy/pen/Khnzy)
Add z-index property does not resolve the issue. How can I fix this?
Another concern is that for short texts, the wrap occurs at every word rather than when the length exceeds a certain limit. How can this be addressed?
View live sample here: