Tippy

How it works

Tippy widgets attaches a tooltip to any widget by setting the widget’s class as the target. It allows us to create unlimited tooltips to unlimited widgets.

Content tab

Animation group

Text: the content to display at the tooltip.
Show duration: the entrance animation duration of the tooltip.
Hide duration: the exit animation duration of the tooltip.
Arrow: if true, an arrow will be displayed in the tippy pointing out to the element.
Show delay: the entrance animation delay of the tooltip.
Hide delay: the exit animation delay of the tooltip.
Trigger animation: wether the animation should be call when the user hovers or clicks.
Animation: the animation type. You can choose from fade, scale, shift-toward, shift-away and perspective.
Follow cursor: if an option is selected the tippy generated will follow the cursor through the element. True: X & Y axis, Horizontal: X axis, Vertical: Y axis.
Hide on click: if enabled, if the user clicks the element once the tippy is generated then it will hide.
Interactive: if enabled, the tooltip content can be selectable.
Max width: sets the maximum width the tippy can achieve.
Placement: where to generate the element regarding the element target. top, left, right or bottom.
zIndex: z-index of the tooltip.
Touch: if enabled, the tippy can be call by touch pointers.