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 
 icon: info-circle)

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 
 icon: zoom-in)

Tooltips on click: and and

Note: tooltip button icons can, at the moment, only be placed in front of the text.

Share

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.