Please help me in getting these tooltips to work in IE 10 and Opera

HTML & CSS
1

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.

Here is what I have so far: https://dl.dropbox.com/u/270523/CSS3Tooltips/index.html

Thanks in Advance!

2

Hi,

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.

Eric Watson has a nice css3 only tooltip here that works in opera and ie9.

3

Here is the new address. http://goo.gl/JKWTm :slight_smile:

4
Off Topic:

You need to get some 301 redirects happening if you want to avoid a big dip in search rankings. :wink:

5

I never had a good amount of them anyway. Here is my topic I just started on it… http://www.sitepoint.com/forums/showthread.php?973217-What-How-would-you-do-with-this-rewrite&p=5317537#post5317537. I do have a blanket 301 in there now. How do you say the OFF TOPIC tag?

6
Off Topic:

[noparse]
You do it like this [ot] Off topic comment [/ot]
[/noparse]

7

@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!

8

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

9

@PicnicTutorials Okay, I used the new ( animated ) one and I love it! Thank you :slight_smile:
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 ) ?

Here is a live example: https://dl.dropbox.com/u/270523/tooltips.html

10

@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 ?

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.

12

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

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

13

@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.

Here is a sample: https://dl.dropbox.com/u/270523/tooltips.html

Also how, if you don’t mind, how did you make the border continuous so that it looked like the arrow and the span were a single element?

14

Just mess with all the rules and you’ll begin to see what moves what. The border around the triangle is controlled by this…

.tooltip span:before, .tooltip span:after { /* bottom triangle - the white border /
content:‘’; / add html content /
position:absolute; / AP bottom triangle /
bottom:-13px; / position bottom triangle /
left:50%; / center bottom triangle /
margin-left:-12px; / center bottom triangle /
border-left:12px solid transparent; / build bottom triangle /
border-right:12px solid transparent; / build bottom triangle /
border-top:12px solid rgb(255,255,255); / build bottom triangle IE6/7/8 /
border-top:12px solid rgba(255,255,255,.8); / build bottom triangle modern browsers */
}

15

That should work in ie6. I’ll have a look on mine tomorrow

16

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.

17

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
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?

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.

20

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