... 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
—
2012-09-07T18:09:00Z —
#8

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
—
2012-09-07T22:04:07Z —
#9

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
—
2012-09-07T22:14:16Z —
#10

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
—
2012-09-07T23:46:40Z —
#11

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:

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?

ralphm
—
2012-09-08T04:29:06Z —
#15

johnsmith153 said:

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:

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

Otherwise, you can use JS to intercept the natural link behavior.

johnsmith153
—
2012-09-08T04:31:17Z —
#16

ralph_m said:

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

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

Clever!!

kohoutek
—
2012-09-08T04:42:29Z —
#17

johnsmith153 said:

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

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
—
2012-09-08T05:47:58Z —
#19

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!

ralphm
—
2012-09-08T05:53:17Z —
#20

johnsmith153 said:

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: