Scrolling gear Scrolling gear Scrolling gear
Tippy 6.2.0 and Alternate Triggers

Tippy 6.2.0 adds another attribute to the Tippy toolbox: alttrigger. Use alttrigger when you want an element other than the default Tippy link to trigger the Tippy tooltip.

Set alttrigger to the CSS element you want to target. It can be a class or an id but be sure to include . or # accordingly. When you specify a trigger, it can match multiple elements meaning you can have multiple triggers for a tooltip. Here are some examples.

First, to start things off.

[tippy title="a simple tooltip" alttrigger=".altdemo"]I'm just here to demonstrate the way alttrigger works.[/tippy]
This is a div. It has class=”altdemo” so mousing over it should trigger the above tooltip.

Link with altdemo class

And an image:

Yep, altdemo

Note also that the elements match whatever kind of trigger is set on the shortcode. If it is set to show on hover, the alternate elements will show on hover. If it’s set for click, so will the alternates.

(Update: Tippy 6.2.1 should show up soon in the repository and will fix a bug where the tooltip would not close when leaving the alternate trigger)

I’m just here to demonstrate the way alttrigger works.


  • Does anyone know why my icon and popup don’t show unless I’m logged in? Here is the code im using

    [tippy title="Bitzino Casino" alttrigger=".altdemo" img="" width="666" height="510"][/tippy]

  • some reason the youtube code used isnt working while publishing this gezo

Leave a comment

Your email address will not be published. Required fields are marked *