Hints

@@adsense

Default

Hint bottom

Hint top

Hint right

Hint left

Variant 2

Hint bottom

Hint top

Hint right

Hint left

Custom colors

Hint bottom

Hint top

Hint right

Hint left

How?

To create hint you must add data-role='hint' to element and add then data-hint-* attributes to specify behavior.


                <span data-role="hint"
                    data-hint-background="bg-green"
                    data-hint-color="fg-white"
                    data-hint-mode="2"
                    data-hint="Title|Hint content"
                >This element with hint</span>

Attributes

Data-*	Type	Default value	Description
data-hint	string	empty	Title\|Hint text, with \| separator
data-hint-position	string	bottom	Where hint positioning over element [bottom, top, left, right]
data-hint-mode	int	1	See first example for difference
data-hint-background	string	#FFFCC0	Hex color value or class for background color
data-hint-color	string	#000000	Hex color value or class for text color
data-hint-max-size	int	200	Values for max width of hint
data-hint-timeout	int	0	If value gt 0 hint hided automatically by timeout
data-hint-time-delay	int	0	If value gt 0 hint showing after this time