Hintplugin

Metro UI CSS provides plugin to the ability to create tooltips for any elements. Positioned as a replacement attribute title. This method required plugin metro-hint.js

default hint

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Top hint has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has bottom hint not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Left hint sheets containing Lorem Ipsum Right hint, and more recently with desktop publishing software like Aldus PageMaker including versions of.

data-hint-mode="2"

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Top hint has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has bottom hint not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Left hint sheets containing Lorem Ipsum Right hint, and more recently with desktop publishing software like Aldus PageMaker including versions of.

default hint in grid

Hint on bottom
Hint on top
Hint on right
Hint on left

data-hint-mode="2" in grid

Hint on bottom
Hint on top
Hint on right
Hint on left

To create hint for element you must add data-hint attribute to element. Default position for hint - bottom on element. To change hint position you can add attribute data-hint-position to element with the following possible values: top, bottom, left or right.

<a href="#"
    data-hint="Title|This is a hint for Me"
    data-hint-position="top | bottom | left | right">
        Hover me...
</a>

default hint in table

Test 1 Test 2 Test 3 Test 4

data-hint-mode="2" in table

Test 1 Test 2 Test 3 Test 4