SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,299
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    .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.
    Last edited by Paul O'B; Feb 10, 2013 at 08:12.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Here is the new address. http://goo.gl/JKWTm

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by EricWatson View Post
    Here is the new address...
    You need to get some 301 redirects happening if you want to avoid a big dip in search rankings.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I never had a good amount of them anyway. Here is my topic I just started on it... http://www.sitepoint.com/forums/show...37#post5317537. I do have a blanket 301 in there now. How do you say the OFF TOPIC tag?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,299
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:


    Quote Originally Posted by EricWatson View Post
    How do you say the OFF TOPIC tag?

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



  7. #7
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @Paul O'B : I don't want to dim the effect any, however I will take a look the the linked tooltips. Thank you!

    @EricWatson : 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. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by team1504 View Post
    @Paul O'B : I don't want to dim the effect any, however I will take a look the the linked tooltips. Thank you!

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

  9. #9
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @EricWatson 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 ) ?

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

  10. #10
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @EricWatson 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. #11
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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. #13
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question

    @EricWatson : 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. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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. #15
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    That should work in ie6. I'll have a look on mine tomorrow

  16. #16
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,299
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    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:

    Code:
    .tooltip:hover{visibility:visible}
    .tooltip{zoom:1.0}
    Code:
     <a href="#" class="tooltip"><img ... etc

  18. #18
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for all the help @EricWatson & @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. #19
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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. #20
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Okay, thank you. Thank you for showing a better, your, example and helping me achieve what I needed to :-) .

  21. #21
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    No problem glad to be of help.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •