Abstract vertical pattern

Photo: Rene Böhmer

Tooltip examples

A Tooltip can be placed anywhere in the text. The content for Tooltips are defined in a separate field and can hold images and text. You could show a download link in a Tip or you could also promote a theme in a Tooltip!

How to use

  • Upload load any files or images first in the Images or Files fields in the right column.
  • In the Tooltip(s) field underneath the Share buttons add a Tooltip.
  • Select an image in the Image field and/or enter text (or files) in the Text field.
  • The Tooltip number, to use in your text, will appear left of the Title when the Tooltip has been added.
Text (place anywhere in a Text Block):
(tooltip:1 text:Check this! class:icon-bell)

You can use all available icons.

Keyboard navigation

  • Enter to activate the Tooltip window.
  • The ‘close’ button has focus per default hit Enter to activate.
  • Links within the tip can be navigated with the Tab key.
  • You can also use esc to exit a Tooltip or simply click/tap outside.


1) Not your regular Tooltip

I’m more then just your regular ‘tooltip’ you know. I can, for example, hold a list of links:

2) Pdf download

Download Sample pdf

3) Get ZoON

Get your ZoON theme for Kirby CMS!


Marco Koedam

Marco Koedam

I am a graphic designer, front-end webdeveloper and photographer. Fascinated with the synergy between style and content, message and presentation, form and function. Ever since I was a little boy in the early 70’s, designing the program for a school play – how time flies when you’re having fun.