Changes: Help:Tooltips

Revision as of 20:43, 27 December 2019

Mouse-over tool-tip — 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,^W3.org 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:

style="cursor:help;" will produce this:
Mouse-over me to see the 'help' cursor.
style="cursor:pointer;" will produce this:
Mouse-over me to see the 'pointer' cursor.

Further help and feedback

Browse and search other help pages at Help:Contents
Check Fandom Community Central for sources of further help and support
Check Contacting Fandom for how to report any errors or unclear steps in this article

@@ Line 1: / Line 1: @@
-[[File:Mouse-over_tool-tip.jpg|Example of a large tooltip from the Ikariam Wiki's [[w:c:ikariam:Building:Dump|Dump]] page|thumb|250px]]
+[[File:Mouse-over tool-tip.jpg|Example of a large tooltip from the Ikariam Wiki's [[w:c:ikariam:Building:Dump|Dump]] page|thumb|250px]]
+'''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 <code><nowiki><abbr></nowiki></code> tag rather than <code><nowiki><div></nowiki></code> or <code><nowiki><span></nowiki></code>.
+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,<sup>[https://www.w3.org/TR/html/dom.html#the-title-attribute W3.org]</sup> and not rely on them to supply important content.
-'''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.
 == 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 ''div'' or ''span'' tags containing the parameter '''title="text goes here!"''', like this:
+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:
-:<code><nowiki><span title="This is a tool-tip!">Mouse-over me to see the tool-tip!</span></nowiki></code>
+:<code><nowiki><abbr title="This is a tool-tip!">Mouse-over me to see the tool-tip!</abbr></nowiki></code>
+To produce this (using the ''abbr'' tag):
-This results in:
-: <span title="This is a tool-tip!">Mouse-over me to see the tool-tip!</span>
+: <abbr title="This is a tool-tip!">Mouse-over me to see the tool-tip!</abbr>
 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:
 # '''style="cursor:help;"''' will produce this:
-#: <span style="cursor:help;" title="This is a mouse-over tool-tip with the cursor set to help">Mouse-over me to see the 'help' cursor.</span>
+#: <abbr style="cursor:help;" title="This is a mouse-over tool-tip with the cursor set to help">Mouse-over me to see the 'help' cursor.</abbr>
 # '''style="cursor:pointer;"''' will produce this:
-#: <span style="cursor:pointer;" title="This is a mouse-over tool-tip with the cursor set to pointer">Mouse-over me to see the 'pointer' cursor.</span>
+#: <abbr style="cursor:pointer;" title="This is a mouse-over tool-tip with the cursor set to pointer">Mouse-over me to see the 'pointer' cursor.</abbr>
 {{Seealso|Help:Cursor}}
@@ Line 23: / Line 24: @@
 == See also ==
 * Learn how to [[Help:New page|create a new page]]
-* Learn how to [[Help:Modifying text|modify text]]
+* Learn how to [[Help:Formatting text/instructions|modify text]]
 * Learn how to [[Help:Tables|make tables]]
 == Further help and feedback ==
 {{Help and feedback section}}
+[[de:Hilfe:Tooltips]]
-[[de:Hilfe:Spoiler]]
 [[ja:ヘルプ:ツールチップ]]
+[[pt:Ajuda:Tooltips]]
 [[ru:Справка:Всплывающая подсказка]]
+[[tr:Yardım:İpuclar]]
 [[uk:Довідка:Інтерактивна підказка]]
 [[zh:Help:提示框]]
 [[Category:Editing]]
 [[Category:Source editing]]