utils.hint.js

Uses HINT.CSS (pure CSS tooltip library) to bring its features to JS. It makes use of data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips.

Responsive image

Code

Action

$('.tooltip-link').on('mouseover',function(event){ TOOLTIP.tooltip({ target: $(event.target), type: 'default', direction: 'right', msg: 'tooltip right' }); });
$('.tooltip-link').on('mouseover',function(event){ TOOLTIP.tooltip({ target: $(event.target), type: 'success', direction: 'left', msg: 'tooltip left' }); });
$('.tooltip-link').on('mouseover',function(event){ TOOLTIP.tooltip({ target: $(event.target), type: 'warning', direction: 'top', msg: 'tooltip top' }); });
$('.tooltip-link').on('mouseover',function(event){ TOOLTIP.tooltip({ target: $(event.target), type: 'info', direction: 'bottom', msg: 'tooltip bottom' }); });

API

Option

Required

Default

Description

target required DOM elm to show the hint on
msg optional message to show in the hint
color optional black specifies the color of the hint, possible combinations: red|yellow|green|blue|black
direction optional right direction of the tooltip, possible combinations: left|right|top|bottom
duration optional onhover duration the hint should be displayed for, possible combinations: onhover|always|[numeric value] in ms
is_error optional false marks if the hint is an error

Methods

Method

Default

Repeat

Description

onShow null REPEAT function to execute when 'onShow' happens
onBlur null REPEAT function to execute when 'onBlur' happens
onCreate null ONE-TIME function to execute when 'onCreate' happens
Loading resources, please wait...