Using Tooltips is pretty simple and straightforward. You just place {tip} tags around the text (or image) that should have a tooltip.

You don't need to go into html view, you can use this right in your WYSIWYG editor.

Tooltip with only text

The syntax for a simple tooltip looks like this:

Hover here to see tooltip

{tip content="This is a tooltip!"}Hover here to see tooltip{/tip}

Tooltip with a title and text

To create a tooltip with a title, use the title parameter, like:

Hover here to see tooltip

{tip title="Cool Title!" content="This is the text in the tooltip"}Hover here to see tooltip{/tip}

Tooltip with only a title

You can also create a tooltip with only a title and no content:

Hover here to see tooltip

{tip title="Tooltip Title"}Hover here to see tooltip{/tip}

Tooltip with rich text

The tooltips can contain rich text formatting, like bold, italic and underlined text. Just format the text through your editor's styling options.

Hover here to see tooltip

{tip content="You can use bold, italic, underlined text.
Or use enters and any other markup you want!"}Hover here to see tooltip{/tip}

You can also make images open a tooltip, and you can place images inside the tooltip text itself.

You can even use this - for example - as a gallery:

Tooltip with images

To create this, simply place the thumbnail images in your editor and surround them with the {tip} tags.

You can then use the image parameters to define the large images that will appear inside the tooltip:

{tip image="images/fruit/apple.jpg" image_height="150" image_width="200"}{/tip} {tip image="images/fruit/banana.jpg" image_height="150" image_width="200"}{/tip} {tip image="images/fruit/blueberry.jpg" image_height="150" image_width="200"}{/tip} {tip image="images/fruit/strawberry.jpg" image_height="150" image_width="200"}{/tip} {tip image="images/fruit/orange.jpg" image_height="150" image_width="200"}{/tip} {tip image="images/fruit/lime.jpg" image_height="150" image_width="200"}{/tip}

Or you can simply place the large images right inside the content parameters using your editor:

{tip content=""}{/tip} {tip content=""}{/tip} {tip content=""}{/tip} {tip content=""}{/tip} {tip content=""}{/tip} {tip content=""}{/tip}