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.
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 |