SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can I do this with just CSS (and no JS) ?

    I'm looking for for a simple tooltip that does two things:

    (1) Hover or click a link or image to show a simple message. E.g. to display further information.

    (2) Click a link to show a slightly bigger tooltip that can have HTML in it. E.g. click a link to open a form with a simple text box so the user can submit a message.

    I want to do as much as possible with CSS and without JavaScript. Is this possible at all? What parts of the above can I do with pure CSS?

    Thanks

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by johnsmith153 View Post
    (1) Hover or click a link or image to show a simple message. E.g. to display further information.
    Use the title attribute which specifies extra information about an element.

    HTML Code:
    <a href="#" title="Here's a tooltip">Hover your mouse over this link</a>

  3. #3
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't mean the browser default tooltip. These don't work in mobile browsers. Thanks anyway.

    I'm mainly trying to find out if a CSS-only tooltip can be done, and especially activated with a mouse click (or touch on touch devices), rather than hovering.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    M'kay.
    Then I'll watch with interest to see what of the above can be done with CSS alone.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    CSS will allow you to create a tool tip on hover, but you'll need JavaScript to create a tool tip that activates on click (which you'd need for mobile devices). Here are some handy tutorials:


    http://pop.seaofclouds.com/
    http://demo.tutorialzine.com/2010/07...colortips.html
    http://raena.net/trythis/citetooltips.html
    http://www.walterzorn.de/tooltip/tooltip.htm
    http://vadikom.com/tools/poshy-tip-j...lish-tooltips/
    http://www.himmera.com/Javascript_sc...orn.com__9.htm

  6. #6
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    CSS will allow you to create a tool tip on hover, but you'll need JavaScript to create a tool tip that activates on click (which you'd need for mobile devices). Here are some handy tutorials:


    http://pop.seaofclouds.com/
    http://demo.tutorialzine.com/2010/07...colortips.html
    http://raena.net/trythis/citetooltips.html
    http://www.walterzorn.de/tooltip/tooltip.htm
    http://vadikom.com/tools/poshy-tip-j...lish-tooltips/
    http://www.himmera.com/Javascript_sc...orn.com__9.htm
    Great. Thanks.

    What about changing :hover to :active or something like that? Is that likely to make it work?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by johnsmith153 View Post
    What about changing :hover to :active or something like that? Is that likely to make it work?
    Possibly, but that sounds like a JS thing to me. Here are some links to what's possible with CSS:

    http://www.pmob.co.uk/search-this/tooltip-basic.htm
    http://www.pmob.co.uk/pob/disjointed1.htm
    http://www.search-this.com/2008/02/13/disjointed-css/
    http://www.tooltipper.com/index.php
    http://blogs.sitepoint.com/pure-css3-speech-bubbles

    ... though it's not much use for mobile, which is why I'd suggest JS for this ... or better still, just a link to a separate age for better accessibility:

  8. #8
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great. Thanks.

    I've looked into all of this and decided to do a CSS-only tooltip as best as is possible (to all the best standards, using hover etc.) + then add JS to do the things CSS can't (cancel the hover on mobile devices etc).

    I definitely want to avoid jQuery (or any library) as many older mobiles struggle to run full jQuery code.

    I've looked at the links above and also searched myself (although most need jQuery in my searches!).

    Hopefully somebody can point me to a perfect tooltip that does these four things:

    (1) CSS-only
    (2) completely responsive to screen size (and not having to set a width/height on the tooltip)
    (3) allows for HTML content.
    (4) a bonus would be a set of pre-styled options (of course I could style it myself but my CSS is average). I want to re-use this on a few sites.

    Then I can take that, add the JS, and maybe post my completed version on here!

    Thanks for the links Ralph and they all do some of these, but I can't find one that satisfies me yet.

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Without going into any specifics, the easiest way is with absolute position.
    Give your container element position:relative ( This will have your regular code, and the code for your tool, for , whatever) .
    Give the tooltip/form... position:absolute; left:-99999em; This hides it.
    The container:hover tooltip/form rule then has left:auto; that shows it. You can adjust the position left:;right: top:; bottom; and, of course, margins.

    working on CLICK is another matter. This is because not all elements have a click state, and not all browsers support the :TARGET pseudo class. Worse, once any other link is clicked the element will go back to it's original (hidden state). Natural for a tool tip... but frustrating for a form. Still, depending on the specifics it may get you by. Thats the thing about the web.. there is really no one size fits all solution.

  10. #10
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks.

    I don't suppose you have a link to somewhere that has a basic tooltip set up that has this kind of responsive layout do you?

    It sounds easy enough, but I could just do with a push in the right direction.

  11. #11
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Like has been said, it may not be practical as of yet, but if you want to experiment with it, you could use something like the below as a starting point:

    Code:
    #tooltip {
      position: relative;
      z-index: 1;
    }
    
    #tooltip span {
      display: none;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
      padding: 1em;
      position: absolute;
      z-index: 500;
      left:1em;
      top:2em;
    }
    
    #tooltip:target span {
      display: block;
    }
    
    #tooltip #close-tooltip:target {
      display: none;
    }
    And the HTML:

    Code:
     <p>
          Click <a href="#tooltip">this link</a> for the tooltip to appear.
     <span id="tooltip">Hello! I'm a CSS3 tooltip! <b><a id="close-tooltip" href="#">Close</a></b></span>
        </p>
    Maleika E. A. | Rockatee | Twitter | Dribbble



  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Nice one, Maleika. (I forgot about :target. ) Except I think the ID needs to go on the <p>:

    Code:
    <p id="tooltip">
          Click <a  href="#tooltip">this link</a> for the tooltip to appear.
     <span >Hello! I'm a CSS3 tooltip! <b><a id="close-tooltip" href="#">Close</a></b></span>
        </p>

  13. #13
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Nice one, Maleika. (I forgot about :target. ) Except I think the ID needs to go on the <p>:

    Code:
    <p id="tooltip">
          Click <a  href="#tooltip">this link</a> for the tooltip to appear.
     <span >Hello! I'm a CSS3 tooltip! <b><a id="close-tooltip" href="#">Close</a></b></span>
        </p>
    Yeah, I typed it up wrongly. I have a demo here: http://lab.rockatee.com/temp/css-only-tooltip.html#
    But there's one extra tooltip id which needs to go. I'll do that in the morning and see if I can make it work better.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  14. #14
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [A]

    The problem I see with this is that you have to specify an individual id for every tooltip, AND adjust the CSS for every new tooltip (add each new id in).

    Have I understood that right?

    [B]

    Another thing, I have a hover-based tooltip set up (not this one), but I have one of two problems:

    (1) If I specify <a href="#" for the tooltip then every time it is clicked (like on a mobile) then it jumps to the top of the screen
    (2) If I just code it as <a class="" (and ignore href completely) it works on nearly all browsers except IE<9. (and probably isn;t standards compliant).

    What do I do there?

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by johnsmith153 View Post
    The problem I see with this is that you have to specify an individual id for every tooltip, AND adjust the CSS for every new tooltip (add each new id in).

    Have I understood that right?
    Yes.

    If I specify <a href="#" for the tooltip then every time it is clicked (like on a mobile) then it jumps to the top of the screen
    A way around that with just HTML is to do something like this:

    Code:
    <a href="#self" id="self">
    Otherwise, you can use JS to intercept the natural link behavior.

  16. #16
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    A way around that with just HTML is to do something like this:
    Code:
    <a href="#self" id="self">
    Clever!!

  17. #17
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by johnsmith153 View Post
    [A]

    The problem I see with this is that you have to specify an individual id for every tooltip, AND adjust the CSS for every new tooltip (add each new id in).

    Have I understood that right?
    No, you can use it multiple times by making it a class instead, like this: http://lab.rockatee.com/temp/css-only-tooltip2.html

    The code obviously needs work but it shows the mechanism.


    Code:
    .tooltip {
      position:fixed;
      display: none;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
      padding: 1em;
      z-index: 500;
    }
    
    .tooltip:target {
      display: block;
    }
    HTML:

    Code:
      <p>Click <a href="#show">this link</a> for the tooltip to appear. <span id="show" class="tooltip">Hello! I'm a CSS3 tooltip! <b><a class="close" href="#close">Close</a></b></span></p>
    Maleika E. A. | Rockatee | Twitter | Dribbble



  18. #18
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi. Thanks, it's very good, but all the tooltips seem to be positioned to the left. If you open the browser as wide as it can go (so one of the links is on the far right of the page) then when you click that link the tooltip appears to the left and doesn't look great.

    Must admit, whilst I like the idea to click to open the tooltip, clicking to close seems a slow method. In fact on a mobile I like the idea to touch to open and touch anywhere else to close, which this script can't do.

    Good idea about using the class to style though.

  19. #19
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    With a bit of tweaking you can achieve that. Have a container that is as wide as your viewport and when clicked on any area, the container is set to display:none or some such. There are several ways to go about and not needing an extra close button.

    I'll try and experiment a bit with that, but now I need to get to bed.

    Ralph, thanks for the links, I'll check them out!
    Maleika E. A. | Rockatee | Twitter | Dribbble



  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by johnsmith153 View Post
    all the tooltips seem to be positioned to the left. If you open the browser as wide as it can go (so one of the links is on the far right of the page) then when you click that link the tooltip appears to the left and doesn't look great.
    You could change that easily enough. For example, if you wrap everything in another element (say an i element, just for fun) you could do this:

    Code:
    i.tool {position: relative; font-style: normal; display: inline-block;}
    Code:
    <i class="tool">
      <a href="#show2">ullamco laboris</a>
      <span id="show2" class="tooltip">Hello! I'm a CSS3 tooltip! 
        <b>
          <a class="close" href="#close">Close</a>
        </b>
      </span>
    </i>

    Quote Originally Posted by kohoutek View Post
    Ralph, thanks for the links, I'll check them out!
    You're welcome. I've added yours to the list.

  21. #21
    SitePoint Zealot naynay99's Avatar
    Join Date
    Jan 2010
    Location
    Los Angeles
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how come it can't be done on hover?

  22. #22
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    It can be done on :hover but that's not what the OP wants.

    (2) Click a link to show a slightly bigger tooltip that can have HTML in it
    Maleika E. A. | Rockatee | Twitter | Dribbble



  23. #23
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by naynay99 View Post
    how come it can't be done on hover?
    As Maleika said, it can, but that's a problem for mobiles, where hover generally doesn't work.

  24. #24
    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)
    Hey guys! Here is my :target tooltip (or anything) I did with a few different variations/options. http://www.visibilityinherit.com/cod...popup-menu.php

  25. #25
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    Eric! Nice to see you back.



    Aside from his link (very nicely done) , but keep in mind it wil l have all the downsides of relying on :target.
    So going back to basics: this might help you bot get this done and be able to see how its done..http://csstooltip.com/


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
  •