Best jBox jQuery ToolTip
jBox jQuery plugin is used to show the style tool tips, the tool tips is given from the title attribute. This tool tips can display various position like (Right, Left, Top and Bottom) of the div or other HTML element.We should need to integrate the following two .js file, you can use the both link through the following direct link or download and integrate it with your program.
Tooltip below to the right
You can display the Tooltip below to the right using the following jQuery code.
$('.DemoTooltipBelow').jBox('Tooltip', {
position: {
x: 'right',
y: 'bottom'
}
});
---------
---------
<span class="DemoTooltipBelow" title="I'm below and moved to the right">Below to the right</span>
position: {
x: 'right',
y: 'bottom'
}
});
---------
---------
<span class="DemoTooltipBelow" title="I'm below and moved to the right">Below to the right</span>
Tooltip with the pointer moved to the right
You can display the Tooltip with the pointer moved to the right using the following jQuery code.
$('.DemoTooltipPointer').jBox('Tooltip', {
pointer: 'right:15' // The pointer is moved to the right with a 15 pixel offset
});
---------
---------
<span class="DemoTooltipPointer" title="My pointer is moved to the right">Pointer moved</span>
pointer: 'right:15' // The pointer is moved to the right with a 15 pixel offset
});
---------
---------
<span class="DemoTooltipPointer" title="My pointer is moved to the right">Pointer moved</span>
Tooltip at a different target
You can display the Tooltip at a different target using the following jQuery code.
$('.DemoTooltipTarget').jBox('Tooltip', {
target: jQuery('.DemoTooltipBelow')
});
---------
---------
<span class="DemoTooltipTarget" title="I'm over here">Different target</span>
<span class="DemoTooltipBelow" title="I'm below and moved to the right">Below to the right</span>
target: jQuery('.DemoTooltipBelow')
});
---------
---------
<span class="DemoTooltipTarget" title="I'm over here">Different target</span>
<span class="DemoTooltipBelow" title="I'm below and moved to the right">Below to the right</span>
Tooltip with an offset
You can display the Tooltip with an offset using the following jQuery code.
$('.DemoTooltipOffset').jBox('Tooltip', {
offset: {
x: 30,
y: -5
}
});
---------
---------
<span class="DemoTooltipOffset" title="I have an offset">Offset</span>
offset: {
x: 30,
y: -5
}
});
---------
---------
<span class="DemoTooltipOffset" title="I have an offset">Offset</span>
Tooltip to the left
You can display the Tooltip to the left using the following jQuery code.
$('.DemoTooltipLeft').jBox('Tooltip', {
position: {
x: 'left',
y: 'center'
},
outside: 'x' // Horizontal Tooltips need to change their outside position
});
---------
---------
<span class="DemoTooltipLeft" title="To the left">To the left</span>
position: {
x: 'left',
y: 'center'
},
outside: 'x' // Horizontal Tooltips need to change their outside position
});
---------
---------
<span class="DemoTooltipLeft" title="To the left">To the left</span>
Tooltip to the right
You can display the Tooltip to the right using the following jQuery code.
$('.DemoTooltipRight').jBox('Tooltip', {
position: {
x: 'right',
y: 'center'
},
outside: 'x' // Horizontal Tooltips need to change their outside position
});
---------
---------
<span class="DemoTooltipRight" title="To the right">To the right</span>
position: {
x: 'right',
y: 'center'
},
outside: 'x' // Horizontal Tooltips need to change their outside position
});
---------
---------
<span class="DemoTooltipRight" title="To the right">To the right</span>
Mouse following tooltips have the type "Mouse" instead of "Tooltip"
You can display the Mouse following tooltips have the type "Mouse" instead of "Tooltip" using the following jQuery code.
$('.DemoTooltipMouse').jBox('Mouse', {
content: 'I will follow you'
});
---------
---------
<span class="DemoTooltipMouse">Following your mouse pointer</span>
content: 'I will follow you'
});
---------
---------
<span class="DemoTooltipMouse">Following your mouse pointer</span>
Example Program:- (Editor)
Output:-
Advertisement
0 comments:
Post a Comment