Hover over the boxes reveal the tooltips
Shows a tooltip positioned relative to the given element in an angle which can be at a 0, 90, 180, or 270 degrees.
$('#simple_box').dTooltip({
angle: 270,
content: 'Content of the tooltip'
});
View CSS
Add arrows pointing to the element in interest and add a hover style that is applied when the element of interest is hovered.
$('#advanced_box').dTooltip({
angle: 0,
content: 'Content of the tooltip',
cssClass: 'dtooltipOpacity',
arrowSize: 20,
hideDelay: 1000
});
View CSS
The toolbox will not hide if no hideEvent is defined. The hide method could then be called manually.
var tooltip = $('#sticky_box').dTooltip({
angle: 0,
content: function() {return '...'},
arrowSize: 10,
hideEvent: null
});
$('#close_tooltip').click(function() {
tooltip.remove();
})
DTooltip is designed to be flexible and still very simple to use. The main features are:
Get the readable source code for DTooltip. Use this for development.
Remeber that you also have to include jQuery to your page. Add the following code just before the closing body tag.
<script src="js/dtooltip-min.js"></script>
DTooltip is realeased under the MIT and GPL licenses which means you are free to use this plugin, also in commercial products.