Community Central
Community Central
m (bot: repairing interwiki links)
Line 1: Line 1:
[[File:Mouse-over_tool-tip.jpg|This is an example of a large tool-tip from the Ikariam wiki's [[w:c:ikariam:Building:Dump|Dump]] page.|right|thumb]] Have you ever seen pages or tables that had mouse-over tool-tips that would appear when you hovered your mouse over certain words or phrases. Have you ever wondered how they did this?
+
[[File:Mouse-over_tool-tip.jpg|This is an example of a large tool-tip from the Ikariam wiki's {{#NewWindowLink:http://ikariam.wikia.com/index.php?title=Building:Dump|Dump}} page.|right|thumb]] Have you ever seen pages or tables that had mouse-over tool-tips that would appear when you hovered your mouse over certain words or phrases. Have you ever wondered how they did this?
   
 
Then you have come to the right page to lean how to do '''basic''' mouse-over tool-tips.
 
Then you have come to the right page to lean how to do '''basic''' mouse-over tool-tips.

Revision as of 04:55, 20 February 2013

Mouse-over tool-tip

Dump}} page.

Have you ever seen pages or tables that had mouse-over tool-tips that would appear when you hovered your mouse over certain words or phrases. Have you ever wondered how they did this?

Then you have come to the right page to lean how to do basic mouse-over tool-tips.

Step-by-step

In order to make the basic mouse-over tool-tip all you will have to do is surround the text you wish to have the tool-tip with span tags containing the parameter title="text goes here!" within the opening span tag, like this <span title="This is a tool-tip!">Mouse-over me to see the tool-tip!</span> and you will get:

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 using the same method above and by adding the following parameter style="cursor:< cursor-style >;" to the opening span.

  1. style="cursor:auto;", style="cursor:default;" or style="cursor:text;" will produce this:
    Mouse-over me to see the cursor.
  2. style="cursor:crosshair;" will produce this:
    Mouse-over me to see the cursor.
  3. style="cursor:help;" will produce this:
    Mouse-over me to see the cursor.
  4. style="cursor:move;" will produce this:
    Mouse-over me to see the cursor.
  5. style="cursor:pointer;" will produce this:
    Mouse-over me to see the cursor.
  6. style="cursor:progress;" will produce this:
    Mouse-over me to see the cursor.
  7. style="cursor:wait;" will produce this:
    Mouse-over me to see the cursor.

For those re-size arrows you would use the following:

  1. style="cursor:e-resize;" or style="cursor:w-resize;" will produce this:
    Mouse-over me to see the cursor.
  2. style="cursor:n-resize;" or style="cursor:s-resize;" will produce this:
    Mouse-over me to see the cursor.
  3. style="cursor:ne-resize;" or style="cursor:sw-resize;" will produce this:
    Mouse-over me to see the cursor.
  4. style=cursor:"nw-resize;" or style=cursor:"se-resize;" will produce this:
    Mouse-over me to see the cursor.

You can combine these parameters and many others such as color, background, title=" text ", etc ... to get varied outputs. You can not break anything by adding any of these parameters to your span tags so go experiment and have fun.

See also

Further Help & Feedback