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

**johnsmith153** · Sep 7, 2012 00:32

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

**Pullo** · Sep 7, 2012 02:53

Originally Posted by johnsmith153

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

**johnsmith153** · Sep 7, 2012 02:58

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.

**Pullo** · Sep 7, 2012 03:00

M'kay.
Then I'll watch with interest to see what of the above can be done with CSS alone.

**ralph.m** · Sep 7, 2012 03:04

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

**johnsmith153** · Sep 7, 2012 03:19

Originally Posted by ralph.m

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?

**ralph.m** · Sep 7, 2012 03:22

Originally Posted by johnsmith153

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:

**johnsmith153** · Sep 7, 2012 11:09

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.

**dresden_phoenix** · Sep 7, 2012 15:04

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.

**johnsmith153** · Sep 7, 2012 15:14

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.

**kohoutek** · Sep 7, 2012 16:46

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>

**ralph.m** · Sep 7, 2012 21:02

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>

**kohoutek** · Sep 7, 2012 21:19

Originally Posted by ralph.m

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.

**johnsmith153** · Sep 7, 2012 21:22

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

**ralph.m** · Sep 7, 2012 21:29

Originally Posted by johnsmith153

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.

**johnsmith153** · Sep 7, 2012 21:31

Originally Posted by ralph.m

A way around that with just HTML is to do something like this:

Code:

<a href="#self" id="self">

Clever!!

**kohoutek** · Sep 7, 2012 21:42

Originally Posted by johnsmith153

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

**johnsmith153** · Sep 7, 2012 22:29

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.

**kohoutek** · Sep 7, 2012 22:47

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!

**ralph.m** · Sep 7, 2012 22:53

Originally Posted by johnsmith153

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>

Originally Posted by kohoutek

Ralph, thanks for the links, I'll check them out!

You're welcome. I've added yours to the list.

**naynay99** · Sep 9, 2012 14:06

how come it can't be done on hover?

**kohoutek** · Sep 9, 2012 14:11

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

**ralph.m** · Sep 9, 2012 17:14

Originally Posted by naynay99

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.

**PicnicTutorials** · Sep 10, 2012 06:54

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

**dresden_phoenix** · Sep 11, 2012 02:32

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/

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions