Template:Tooltip

From MozillaWiki
Jump to: navigation, search

{{{1}}}

Documentation icon Template documentation[view] [edit] [history] [purge]

Usage

{{tooltip}} uses the HTML attribute <* title="…"> to create a tooltip for a text-string or an object. It is meant to be complementary to {{abbr}}, which is not intended as a tooltip template.

NB! This template may not work in all browsers. It should, however work in all reasonably current browsers, and in all browsers that support HTML5.

Parameters

There are 4 parameters, of which 2 are unnamed and required, 1 is unnamed and optional, and 1 is named and optional.

Syntax

The template's syntax is

  • {{tooltip|visible text |tooltip text |display style |color=colour value }}

Required parameters

1

Visible text

This is the text that will show on the page. Custom text-string.

Notes
  • This parameter must be entered before the other two unnamed parameters.
Usage
  • {{tooltip|1}}

2

Tooltip text

This is the text that will be displayed in the tooltip, i.e. the little text box which shows when you hover your mouse-pointer over the text specified in parameter |1.

Notes
  • This parameter must be entered after the the 1st unnamed parameter, and before the 3rd unnamed parameter.
  • No wiki-formatting can be used.
Usage
  • {{tooltip|2}}

Optional parameters

3

Display style

You can choose between different ways of marking the visible text, in order to show the reader that it contains a tooltip.

If this parameter is left out, the text will be displayed as normal, without embellishments.

Notes
  • This parameter must be entered after the other two unnamed parameters.
  • The values connected to this parameter are listed under Available values.
Usage
  • {{tooltip|3}}

color

Text or background colour

If you, in parameter |3, choose to use one of the values bgcolor or fgcolor, you can optionally define which colour to use. Both bgcolor and fgcolor have default values, which means you don't need to specify this parameter, in order to use them.

You can use any HTML/CSS/X11 or hexadecimal colour value. See Available values below for examples.

Notes
  • |color is dependant on the values bgcolor and fgcolor, which are available for parameter |3. If none of those is specified, this parameter will be ignored.
Usage
  • {{tooltip|color=HTML/CSS or Hex colour value}}

Available values

Parameter 3

You can decorate the text in six different ways, to let the text with a tooltip attached to it stand out.

Vaule Description Default value Comments
dotted Dotted underline none
dashed Dashed underline none
underline Solid underline none
overline Solid overline none Don't use unless you're writing in a language
or using characters, in which this decoration
is needed.
bgcolor Background colour #E0EEF7 The default value can be changed with the
parameter |color.
fgcolor Text (foreground) colour #4169E1

color

There are two ways of specifying the colour value in this template. You can use web color names, or hexadecimal colour triplets.

The former are names of colours. They can be simple, like yellow or red, or more complex or difficult to infer, for example mediumspringgreen or wheat.

The latter are hexadecimal combinations of RGB colours, in the format #RRGGBB (note the prefixed number sign).

Color value type Example value Result
HTML/CSS/X11 blueviolet
Hexadecimal #8A2BE2

Examples

Parameter What you type What you see Comments
Basic use Hover this text for tooltip|This is a tooltip}} Hover this text for tooltip No text decoration.
[[File:Idea.png|28px|link=]]|This is a tooltip}} Idea.png
|3 Hover this text for tooltip|This is a tooltip|dotted}} Hover this text for tooltip
Hover this text for tooltip|This is a tooltip|dashed}} Hover this text for tooltip
Hover this text for tooltip|This is a tooltip|underline}} Hover this text for tooltip
Hover this text for tooltip|This is a tooltip|overline}} Hover this text for tooltip
Hover this text for tooltip|This is a tooltip|bgcolor}} Hover this text for tooltip
Hover this text for tooltip|This is a tooltip|fgcolor}} Hover this text for tooltip
|color Hover this text for tooltip|This is a tooltip|bgcolor|color=orange}} Hover this text for tooltip
Hover this text for tooltip|This is a tooltip|fgcolor|color=red}} Hover this text for tooltip

See also

  • {{abbr}}: for displaying the meaning of abbreviations and acronyms in a tooltip.
  • {{mark}}: for marking the entered text, as with a marker pen.