TippyTitle and TippyPlus Stack manual

introduction


Both the TippyTitle Stack and the TippyPlus Stack make it possible to show content in tooltips (hover here to see an example). Because the two stacks have many features in common, they are discussed together in this one manual.

On this page, the differences between the two stacks will be discussed. The following pages will deal with their usage, the general settings and the theme settings. There’s also a page dedicated to the differences on devices that use a mouse and on touch devices. Finally, some tips and tricks will be discussed that get the most out of the stacks.

Differences between the TippyTitle Stack and the TippyPlus Stack
Stacks Image 1196
Tippy­Title Stack
Stacks Image 1204
Tippy­Plus Stack
styles title attributes (those little tooltips with text that are shown when hovering over an element)
allows you to use styled content in your tooltips, including images and links
the content of the tooltip is not interactive, i.e. it cannot be copied, clicked etc.
the content of the tooltip is interactive (optionally), i.e. it can be selected, copied, clicked etc.
the content of the tooltip can be styled as a whole
full control over the styling of individual elements in the tooltip
any element inside the stack with a title attribute can receive a tooltip, or a single tooltip for the whole stack can be set
the tooltip can only be received by the whole stack
Both Stacks have the option to target elements elsewhere on the page using custom selectors. This option is meant for advanced users who are familiar with CSS selectors only.
Here are three examples of elements with a title and/or tooltip
‘normal’ title
styled title
styled tooltip

Tooltip

The content of this tooltip is made with the TippyPlus Stack, so it can contain styled text, images, etc.

interactive

Click on the image to see the interactivity of this tooltip
click to enlarge
hover to see the title
hover to see the tooltip
click to see the tooltip
in this manual, all examples that work on hover have a light blue background; examples that work on click have a purple background
Stacks Image 1386
Stacks Image 1381