Full version: jsB@nk » Link » Tooltip » xTooltipGroup
URL: https://www.javascriptbank.com/tooltips-xtooltipgroup.html
Tooltips are positioned to the right or top of the trigger element, or follow the mouse. The tooltip text is taken from the trigger element's TITLE attribute - or you can optionally provide your own text (as html).
Full version: jsB@nk » Link » Tooltip » xTooltipGroup
URL: https://www.javascriptbank.com/tooltips-xtooltipgroup.html
<link rel="stylesheet" type="text/css" href="v3.css"><style type="text/css">/* Tooltip Groups - for elements which trigger tooltips */.tipGrp1 { color:#663; border-bottom:1px dashed #663; cursor:default;}.tipGrp2 { color:#630; border-bottom:1px dashed #630; cursor:default;}.tipGrp3 { color:#330; border-bottom:1px dashed #330;}.tipGrp4 { color:#ffc; border-bottom:1px dashed #ffc; cursor:default;}/* Tooltip styles for each group */.tipGrp1s { position:absolute; visibility:hidden; overflow:hidden; color:#663; background:#cc9; border:1px solid #663; font-size:10px; margin:0; padding:1px; width:150px; height:auto; z-index:10;}.tipGrp2s { position:absolute; visibility:hidden; overflow:hidden; color:#cc9; background:#663; border:1px solid #cc9; font-size:10px; margin:0; padding:1px; width:200px; height:14px; z-index:10;}.tipGrp3s { position:absolute; visibility:hidden; overflow:hidden; color:#ffc; background:#330; border:1px solid #ffc; font-size:10px; margin:0; padding:1px; width:150px; height:auto; z-index:10;}.tipGrp4s { position:absolute; visibility:hidden; overflow:hidden; color:#330; background:#ffc; border:1px solid #330; margin:0; padding:2px; width:180px; height:auto; z-index:10;}</style><style type="text/css">#xTooltipElement{position:absolute;visibility:hidden;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript" src="x_core.js"></script><script type="text/javascript" src="x_event.js"></script><script type="text/javascript" src="x_dom.js"></script><script type="text/javascript" src="x_tip.js"></script><script type="text/javascript">window.onload = function(){ new xTooltipGroup('tipGrp1', 'tipGrp1s', 'right', 4, 0); new xTooltipGroup('tipGrp2', 'tipGrp2s', 'top', 0, -2); new xTooltipGroup('tipGrp3', 'tipGrp3s', 'mouse', 20, -10); new xTooltipGroup(['p0','p1','p2','p3', 'p4','p5'], 'tipGrp4s', 'right', 4, 0, ["<p align='center'><b>xTooltipGroup</b></p><p align='center'>Demo</p>", "<p><b>grpClassOrIdList</b></p><p>The css class name which you add to any element you want to trigger a tooltip - Or - an array of id strings.</p>", "<p><b>tipClass</b></p><p>The css class name applied to the tooltip triggered by elements with the grpClass class name (or elements whose id is in the IdList)</p>", "<p><b>origin</b></p><p>One of 'right', 'top', or 'mouse'. For 'right' or 'top', the tooltip is positioned to the right (or top) of the trigger element. For 'mouse' the tooltip will follow the mouse. In all three cases the offsets are applied.</p>", "<p><b>xOffset, yOffset</b></p><p>The tooltip is positioned relative to the above origin, offset by these amounts</p>", "<p><b>textList</b></p><p>If grpClassOrIdList is an array of IDs, then textList provides the tooltip text for the corresponding array index. If grpClassOrIdList is a class name then textList is not needed (tooltip text is taken from the element's TITLE attribute).</p>"]);}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><p><span class="tipGrp2" title="An X Toy From Cross-Browser.com">xTooltipGroup</span>provides for multiple groups of tooltips. For each group you create two style classes. One is applied to all elements which will trigger the tooltip. The other specifies the tooltip style for the group. The tooltip takes its text from the element's TITLE attribute - or you provide an array of strings.</p><p>There are four different tooltip groups on this demo page: <span class="tipGrp1" title="class='tipGrp1'">Group 1</span>, <span class="tipGrp2" title="class='tipGrp2'">Group 2</span>, <span class="tipGrp3" title="class='tipGrp3'">Group 3</span>, and <span id="p0" class="tipGrp4">Group 4</span>. Tooltip size and styling is controlled by the <i>tipClass</i> argument. Tooltip positioning is controlled by the origin and offset arguments.</p><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/link/tooltips/v3.csshttp://javascriptbank.com/javascript/link/tooltips/x_core.jshttp://javascriptbank.com/javascript/link/tooltips/x_event.jshttp://javascriptbank.com/javascript/link/tooltips/x_dom.jshttp://javascriptbank.com/javascript/link/tooltips/x_tip.js