Tooltip

Use tooltips that can hold text and images, select trigger and animation. Tooltips are used in a Markdown Block.

Hover button

A structure field on the Item Page is used to create the tooltips. With a custom Kirbytag (tooltip) and the tooltip id (tip-1), a button is generated to access the tooltip content.

(tooltip:tip-1 text:button)

A tooltip on hover:

Click button

By default a tooltip is triggered on ‘hover’ but ‘click’ can also be used. Specify ‘scale’, ‘in’ or ‘out’ for the animation, the default animation is ‘fade’.

(tooltip:tip-2 text:animate scale trigger:click animate:scale)

Tooltips on click: and and


Lighthouse for this page

Tooltips

Please turn on javascript

1) Tooltip 1 demo

This Tooltip is triggered by hover and uses the default fade animation.

2) Tooltip 2 demo

This is a tooltip with an image and scale animation

3) Tooltip 3 demo

This tooltip:

  • Contains a list
  • Uses the in animation
  • Is triggered on click

4) Tooltip 4 demo

This is a tooltip with an image and out animation. You can also use links in a tooltip.

5) Lighthouse

Mobile Desktop
Performance 98 100
Accessibility 100 100
Best Practices 100 100
SEO 100 100