2

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.

Improve this question
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... 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... 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 Commented Apr 20, 2015 at 14:02
  • I feel old, but I've made progress over the years ;] Commented May 22, 2022 at 10:00

1 Answer 1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Hey, yeah it fixed it on JSFiddle, but I tried that on my website and it is still not working, I am using overflow-y/x somewhere in my css. I dont even know where lol. Check out this Screen or go directly to Project This is not up to date, but if you resize your window and hover over an "?" sign near left side stats like "STR, END" you will notice that tooltip hide behind everything -_-
I found a bug: inside my bootstrap css: .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: 10px; overflow-y: auto; overflow-x: auto; } overflow-x or/and y cause this to happen. but I want to use them if possible, is there a way to make tooltip display on top and ignore overflow?
I couldn't get the tooltips to load at all on the project link, but I can see from the screen cap that it is the same issue, your tooltip is showing up outside the available viewport. I found this stackoverflow.com/questions/13680501/… which may help some?
Hey, position: fixed works for me :) I am not sure if thats the way I should go if I want responsive design but I will stick with this for a while until I figure out a better way. Thanks, you can edit your answer and I will accept it. Btw, what browser did you use to test a tooltip on project page?
well according to the link I posted it seems that changing to position:fixed should sort the issue, binding the element to the viewport. failing that your going to need to get creative with a container class that you can use to pad your tooltips inside the viewport without impacting your x/y overflow on your overall page.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.