Hello,I am working on creating tooltips for my website's glyphs / icons in the navigation to explain what each item links to.

With some help, I achieved tooltips that work with JS and CSS3 in most modern browsers. However, I am having some trouble getting them to appear in IE 10 and Opera.

I don't want them to appear in IE less than version 10 ( because of improper interpretation of the CSS3 ) and to do so, I placed the js that initiates the tooltips in an IE conditional comment.Although that doesn't seem to be working?

I do what the tooltips to appear in Opera, if possible, but they are not doing so.

Lastly, i was wondering if there is anything I can do in CSS to get the tooltips to 'gracefully degrade' or when not supported, still allow for a browser's default tooltips that show the title attribute on hover to appear.

If anyone could help me achieve these three goals, I would greatly appreciate it.

It mentions in Chris's example that pointer events are not supported in Opera or IE9 and therefore won't work as the tooltips sit invisibly on top of the content and stop the links being clicked.

The only solution is to move the tooltip offscreen but that spoils the effect a little.

.tooltip {
margin-top:-99em;/* needs to be taller than the page height or you will obscure other links elsewhere.
}

That fix will also allow IE9 to work if you also exclude ie9 from the CCs.

However as mentioned that spoils the nice fade effect for others so your options are to give IE9 the margin-top through conditional comments and to give opera the value by JS or as Chris said in the article change the js to display:none/block for opera only.

@Paul_O_B: I don't want to dim the effect any, however I will take a look the the linked tooltips. Thank you!

@PicnicTutorials: Thank you for creating these! What is the difference between the animated ones and the tooltip extravaganza. I personally like the animated ones and love how it seems to work in pretty much everything!

PicnicTutorials
—
2013-02-11T15:46:42Z —
#8

team1504 said:

@Paul_O_B: I don't want to dim the effect any, however I will take a look the the linked tooltips. Thank you!

@PicnicTutorials: Thank you for creating these! What is the difference between the animated ones and the tooltip extravaganza. I personally like the animated ones and love how it seems to work in pretty much everything!

Welcome. The extravaganza one is old and was just showing all the ways to show/hide things. Use the animated one.

team1504
—
2013-02-11T16:08:48Z —
#9

@PicnicTutorials Okay, I used the new ( animated ) one and I love it! Thank you I tried it and it works all around, but not in IE6. I know its becoming less and less important to code for ie6 daily, but wasn't it supposed to work in IE 6 or at least have the default tooltip instead ( gracefully degrade ) ?

@PicnicTutorials Also, I am trying to make the tooltips inverted. Meaning so that they ( the span's ) are underneath the corresponding <a> and so that the arrows ( the pseudo-elements ) are on top of the spans.

Could you or any one else in the forum help me with that ?

team1504
—
2013-02-11T22:16:22Z —
#11

Okay, I figured out how to move the tooltip below the anchor by adding top positioning and height. But, I can't manage to reverse the triangle, make it upside down, and on top of the <span>. I tried changing the border-top to border-bottom, the same way one makes an up-pointing triangle in CSS; but, that doesn't seem to work.

PicnicTutorials
—
2013-02-11T22:18:56Z —
#12

Here is how to do the reverse triangle. Then just give it top:-14px or so

triangle-up {

@PicnicTutorials: Apologies if I've been bothering you and if I am doing so again.

Yes, the CSS you posted in the post above makes sense, and that makes an up-ward pointing triangle, but without a white border. But, no matter how high / low of a negative value I give the top property, it doesn't push it up any higher.

nope it doesnt seem to work in ie6. I would pay ZERO mind to that though. There is a fix for it I'm positive. Prob a very easy trick that I dont remember anymore. Curiously, I noticed this before, but FX rounds the arrow border 1px different than all the others.

PaulOB
—
2013-02-12T15:13:09Z —
#17

EricWatson said:

nope it doesnt seem to work in ie6.

IE6 only actions hover on anchors - that is a elements that have an href. If you just use <a > then you get no hover. You also need "haslayout" when using position:relative or IE6 doesn't know where its boundaries are. Lastly you need to action a change on hover first before you taget an inner element such as a span otherwise it doesn't work.

e.g These 3 fixes:

.tooltip:hover{visibility:visible}
.tooltip{zoom:1.0}

<a[B] href="#"[/B] class="tooltip"><img ... etc

team1504
—
2013-02-12T16:19:44Z —
#18

Thank you very much for all the help @PicnicTutorials & @Paul_O_B— i greatly appreciate it.

One last thing, what to do in browsers, such as Opera 10, less than FF 3.6, and IE 6, that do not show the tooltip or show it improperly?I believe when reading Eric's original post, I believe he said there is a way in CSS to force or cause the default tooltip that a browser has?

PicnicTutorials
—
2013-02-12T16:41:16Z —
#19

Doing what Paul said will make ie6 pop up a plain square box. And I would not worry about older fx and opera. 99.5% of those users upgrade.

team1504
—
2013-02-12T16:49:55Z —
#20

Okay, thank you. Thank you for showing a better, your, example and helping me achieve what I needed to .