javascript - How to display tooltip on top of everything - Stack Overflow

admin管理员组

文章数量:1399903

I have a problem with the tooltip which is not displaying on top of everything. I tried to change z-index to a really high number but that didn't work.

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;
}

/*CSS3 extras*/

a.tooltipA span {
border-radius:4px;
box-shadow: 5px 5px 8px #CCC;
}

HTML:

html += '<a href="#" class="tooltipA">'
html += '<span>' + "Tooltip text"
html += '</span></a>';

You can check out this code: First tooltip is not fully visible. JSFiddle

If possible I would like an answer using css/html but javascript is also an option. I can't use jquery. If you need more details, let me know. I also use bootstrap 3, but that doesn't matter I guess, since same thing happens on JSFiddle.

I have a problem with the tooltip which is not displaying on top of everything. I tried to change z-index to a really high number but that didn't work.

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;
}

/*CSS3 extras*/

a.tooltipA span {
border-radius:4px;
box-shadow: 5px 5px 8px #CCC;
}

HTML:

html += '<a href="#" class="tooltipA">'
html += '<span>' + "Tooltip text"
html += '</span></a>';

You can check out this code: First tooltip is not fully visible. JSFiddle

If possible I would like an answer using css/html but javascript is also an option. I can't use jquery. If you need more details, let me know. I also use bootstrap 3, but that doesn't matter I guess, since same thing happens on JSFiddle.

• javascript
• html
• css

Share Improve this question Follow asked Apr 20, 2015 at 13:57 MariuszMariusz 36111 gold badge44 silver badges1717 bronze badges 4

• Do you mean that it's not fully visible because the top portion of the top tooltip goes off the top of the viewport? I'm not seeing any other elements overlapping it... – Tim McClure Commented Apr 20, 2015 at 13:59
• 1 Yeah, the fiddle problem is just an issue with the negative top margin positioning it off the top of the page... – Ted Commented Apr 20, 2015 at 14:00
• 2 The only problem with your JSfiddle is the -30px on margintop. When I removed that, it worked out perfectly – Felipe Skinner Commented Apr 20, 2015 at 14:02
• I feel old, but I've made progress over the years ;] – Mariusz Commented May 22, 2022 at 10:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

The problem with your fiddle is the margin-top:-30px in a.toolTipA span is moving the tooltip for the top link out of the viewport. You either need to start your items at least that far down the page, or remove that line from the css.

According to this previous stackoverflow post, setting position:fixed will keep your elements in the viewport.

本文标签： javascriptHow to display tooltip on top of everythingStack Overflow