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
Use the title attribute which specifies extra information about an element.
<a href="#" title="Here's a tooltip">Hover your mouse over this link</a>
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.
M’kay.
Then I’ll watch with interest to see what of the above can be done with CSS alone.
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-jquery-tooltip-plugin/colortips.html
http://raena.net/trythis/citetooltips.html
http://www.walterzorn.de/tooltip/tooltip.htm
http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/
http://www.himmera.com/Javascript_scripts/Tooltip_Javascript_example_html_css_js_tooltips_JQuery-Tooltip_javascript_and_CSS_JavaScript,_DHTML_Tooltips_WalterZorn.com__9.htm
Great. Thanks.
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:
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.
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.
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.
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:
#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:
<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>
Nice one, Maleika. (I forgot about :target. 
) Except I think the ID needs to go on the <p>:
<p [COLOR="#FF0000"]id="tooltip"[/COLOR]>
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.
[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?
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:
<a href="#self" id="self">
Otherwise, you can use JS to intercept the natural link behavior.
Clever!!
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.
.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:
<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>
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.
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!
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:
i.tool {position: relative; font-style: normal; display: inline-block;}
[COLOR="#FF0000"]<i class="tool">[/COLOR]
<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>
[COLOR="#FF0000"]</i>[/COLOR]
You’re welcome. I’ve added yours to the list. 