What is the best way to build a Custom Tooltip with CMS Text

[mikeandco (Mike)]

When hovering over project images, I would like the tooltip to change:

• Change mouse curser to play button (image)
• Show project name
• Show client name

Of course being a tooltip it should only appear on hover over the project image and and the whole tooltip div (including text) should track to the mouse position in the viewport. It would disappear between project images.

I would have thought the effect would be achievable with interactions (hide on load, show on hover), but new interactions don’t support collection items yet and how would I get it to track to the mouse cursor?

Help appreciated

Here is my site Read-Only: LINK

[vincent (Vincent Bidaux)]

By using custom code with CMS variables.

Instead of dragging an image from the add panel and link it to your CMS image, use a custom code element and paste this code:

<img src="smiley.gif" alt="Smiley face">

Now select smiley.gif and click there:

http://vincent.polenordstudio.fr/snap/3xub4.jpg

I selected Main Image

http://vincent.polenordstudio.fr/snap/zy6rx.jpg

So now I have one variable for my image source

Sweet purple color

http://vincent.polenordstudio.fr/snap/9t6ga.jpg

So you set the other variable, for tooltip, right

http://vincent.polenordstudio.fr/snap/0bqtb.jpg

Oh, wait a second I’m tired I forgot that this is not the ALT that makes the tooltip but the TITLE… no problem, the code looks like this (and let the ALT so you have clean code, well accessible)

http://vincent.polenordstudio.fr/snap/i6k4r.jpg

And once published it works

http://vincent.polenordstudio.fr/snap/phlnq.jpg

And my collection item looks like this

http://vincent.polenordstudio.fr/snap/h6rf3.jpg

[mikeandco (Mike)]

Thanks @vincent

Awesome, that makes sense for getting the tooltip text in from the collection item.

But, how can I target the tooltip so that I can style it?

Have a look at my image above:
There are two text elements that need to be styled that make up the tooltip, and then I want to change the mouse cursor to an image—in this case a play button.

Any ideas? Thanks again.

[mikeandco (Mike)]

Any thoughts on the above @vincent?

Much appreciated,

Mike

[vincent (Vincent Bidaux)]

You don’t style the HTML tooltip, that’s an accessibility feature.

If you want a proper style you can simply make a tooltip using interaction and CMS.

For the cursor:

.custom {
  cursor: url(images/my-cursor.png), auto;
}

But be careful, custom cursors aren’t really recommended, once again for accessibility.