« »

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

Label: xTooltipGroup

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Generate your business videos by AI with voice or just text

Your first FREE AI Video App! Automate Your First AI Video. Create Your Professional Video In 5 Minutes By AI No Equipment Or Video Editing Skill Requred. Effortless Video Production For Content Marketers. Free UNLMITED AI Video App in Your Hand

Code
Files
CSS
JavaScript
HTML
Print

Copy All x2

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

Copy All x2

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

Copy All x2

<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&#39;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
	-->

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/01/2007
Cross-Browser [more]
2,996
0
0
0
11.48 KBytes

JavaScript xTooltipGroup

0/5 0 votes / 2,996 previews / 0 comment 30/01/2007 Tooltips are positioned to the right or top of the trigger element, or follow the mouse. The tooltip text is taken from ...JavaScript xTooltipGroup - xTooltipGroup

Let's be first member to do this

mutafa123

Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web

xTooltipGroup

Label: xTooltipGroup (adsbygoogle = window.adsbygoogle || []).push({});

Generate your business videos by AI with voice or just text

Write your comment

Label: xTooltipGroup