1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="../css/tooltip.css">
<link rel="stylesheet" href="../css/tooltip.dream.css">
<link rel="stylesheet" href="../css/tooltip.sea.css">
<script src="js/vendor/jquery-1.8.0.min.js"></script>
<script src="../src/jquery-asTooltip.js"></script>
2. HTML
<span class="tip" data-asTooltip-position="n" title="This is tip content">trigger</span>
3. JAVASCRIPT
$(".tip").asTooltip();
4. OPTIONS
Initialize asTooltip with custom settings:
$(".tip").asTooltip({
namespace: 'asTooltip',
trigger: 'hover' // hover click
});
Settings:
{
// Optional property, Set a namespace for css class
namespace: 'asTooltip',
// Optional property, set target that show asTooltip
// it works when title property was not set
target: null,
// Optional property, the way to trigger asTooltip content
// 'hover'/'click' to choose
trigger: 'hover', // hover click
// Optional property, if true, asTooltip will allow you interact with it
// so you can some stuff, for example, copy the asTooltip content
interactive: false,
// Optional property, set how long the asTooltip will stay
interactiveDelay: 500,
// Optional property, if true, tip will trace with mouse inside selected element
mouseTrace: false,
// Optional property, if true, it will bind close function to a element
closeBtn: false,
// Optional property, set the distance between tip and element
distance: 10,
// Optional property, choose asTooltip skin, more skins is coming soon
skin: null,
// Optional property, set tip display position according to element
position: 'n',
// Optional property, if true, it will adjust asTooltip's position when asTooltip occur collisions with viewport
autoPosition: true,
// Optional property, set transition effect, 'fade'/'zoom'/'none' to choose, more effects are coming soon
effect: 'fade', // fade none zoom
// Optional property, define how long animation effect will last
duration: 200,
// Optional property, set inline element as asTooltip content
inline: false,
// set asTooltip content
// by defaults, you can set your content as strings
// if ajax is true, you can use resource reference, for example:'ajax.txt'
// if inline is true, you can use inline DOm selector, for example: '#id', or '+', means select current element's next sibling element
content: content or resource reference or '+'
contentAttr: 'title',
// Optional property, if true, it will load content with ajax, the url attached in element's title property
ajax: false,
// Optional property, set ajax config
ajaxSettings: {
dataType: 'html',
headers: {
'asTooltip': true
}
},
// asTooltip template
tpl: {
tip: '<div class="{{namespace}}"></div>',
loading: '<span class="{{namespace}}-loading"></span>',
content: '<div class="{{namespace}}-content"></div>',
arrow: '<span class="{{namespace}}-arrow"></span>',
close: '<a class="{{namespace}}-close"></a>'
}
}
5. METHODS
jquery asTooltip has different medthod , we can use it as below :
// show asTooltip
$(".tip").asTooltip('show');
// hide asTooltip
$(".tip").asTooltip('hide');
// add a disable class to asTooltip elment
$(".tip").asTooltip('disable');
// remove the disable class
$(".tip").asTooltip('enable');
// remove asTooltip Dom emement and unbound all events
$(".tip").asTooltip('destroy');
6. EVENTS
-
asTooltip::show: trigger when show called
-
asTooltip::hide: trigger when hide called
-
asTooltip::update: trigger when hide called
how to use event:
$(document).on('asTooltip::show', function(event,instance) {
// instance means current asTooltip instance
// some stuff
});
JS Tutorial
