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?
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.
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:
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.
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:
<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>
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.
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).
<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.
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.