Community Central
Community Central

Example of a large tooltip from the Ikariam Wiki's Dump page

Tooltips are simple hover effects you can use to provide extra information to readers when they hover over certain elements on a page, such as text. This is most useful for adding context, expanding abbreviations, quick common term translations, and adding a description to terms on your community that may not be obvious to a general reader. They should only be used on text elements for best results, and should use the <abbr> tag rather than <div> or <span>.

Mobile devices are not able to "hover", as they have no pointing device. Therefore, you should only use tooltips to supply simple and additional information, and not rely on them to supply important content.

Step by step

In order to make a basic tooltip all you will have to do is surround the text you wish to have a tooltip with abbr tags containing the parameter title="text goes here!", like this:

<abbr title="This is a tool-tip!">Mouse-over me to see the tool-tip!</abbr>

To produce this (using the abbr tag):

Mouse-over me to see the tool-tip!

You can also change the way the cursor looks when hovering over the same text or any other text by adding style="cursor:<cursor-style>;". For example:

  1. style="cursor:help;" will produce this:
    Mouse-over me to see the 'help' cursor.
  2. style="cursor:pointer;" will produce this:
    Mouse-over me to see the 'pointer' cursor.
See also: Help:Cursor

See also

Further help and feedback