I am trying to use a tooltip in css, it is working, but I have a problem when the tooltips appear, because the text in the p tag its is showing over the span content "the tooltip" I want to show over all the content. Ive been trying withh z-index, also defining the position in al the tags, but cant understand why it is not working. I would apreciate any tip about how can I solve it.
I have the next html structure
<div>
<a class="tooltip">
<p>Test1</p>
<span>saassa</span>
</a>
</div>
And the CSS:
a.tooltip {
outline: none;
text-decoration: none;
border-bottom: dotted 1px blue;
display: inline;
position: relative;
padding: 0;
background: none repeat scroll 0 0 #bcd9db;
z-index: 20;
}
a.tooltip p {
margin-bottom: 0px;
display: inline;
color: #006565;
position: relative;
z-index: 20;
}
a.tooltip > span {
width: 25em;
padding: 10px 20px;
margin-top: 20px;
margin-left: -85px;
opacity: 0;
visibility: hidden;
z-index: 1000;
position: absolute;
font-family: Arial;
font-size: 12px;
font-style: normal;
color: #000000;
background: #FBF5E6;
border: 2px solid #CFB57C;
z-index: 1000;
}
a.tooltip:hover > span {
opacity: 1;
text-decoration: none;
visibility: visible;
overflow: visible;
margin-top: 50px;
display: inline;
margin-left: -260px;
background: #fbf5e6;
position: absolute;
z-index: 100000;
}
I have loadded to Fiddle, so you can see it, just hover in any of the three first links and you will see that cant see all the content of the divs. http://jsfiddle.net/mtzcq/3/
Thank you very much
Remove the z-index
from a.tooltip
, and a.tooltip p
.
That worked for me in Firefox for Mac
En ElCódigoHTML Tiennes Qu quitar Dentro del Spa los H6
删除所有“ Z-index”实例,但a.tooltip> span中的一个除外
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.