Having an issue with the tooltip not displaying correctly. Tried adjusting the z-index with no success.
Styling in CSS:
a.tooltipA {
outline:none;
}
a.tooltipA strong {
line-height:30px;
}
a.tooltipA:hover {
text-decoration:none;
}
a.tooltipA span {
z-index:10;
display:none;
padding:14px 20px;
margin-top:-30px;
margin-left:28px;
width:300px;
line-height:16px;
}
a.tooltipA:hover span {
display:inline;
position:absolute;
color:#111;
border:1px solid #DCA;
background:#fffAF0;
}
.callout {
z-index:20;
position:absolute;
top:30px;
border:0;
left:-12px;
}
/*Extra CSS3 styling*/
a.tooltipA span {
border-radius:4px;
box-shadow: 5px 5px 8px #CCC;
}
HTML Code:
html += '<a href="#" class="tooltipA">'
html += '<span>' + "Tooltip text"
html += '</span></a>';
Check out this code example where the first tooltip is not fully visible: JSFiddle
Preferred solution to address this using CSS/HTML, but JavaScript is also an option. Cannot use jQuery. If more information is needed, feel free to ask. Bootstrap 3 is also used, although it may not be relevant as the issue persists in JSFiddle.