{{indexmenu_n>250}}

====== Simple JS-ToolTip <abbr> ======

FIXME Translate

A simple JavaScript "tool tip" which converts the title tag within the inline element **<abbr>** in formated text. \\
//([[http://webdesign.about.com/od/htmltags/p/bltags_abbr.htm|<abbr></abbr>]])//

\\

----
V1.0  24.08.2011  

Docu: -- \\
Forum: -- \\


**Author:**  Craig Erskine http://qrayg.com \\
**Enhanced:** K.Heermann (flip-flop) http://planmatrix.de \\

**CMS Version:** >= 1.3 \\ 
**Version:** V1.0 \\


Tag: %%<abbr title="TitleText">Text</abbr>%%  \\

Filenamen: ** qtip.css, qtip.js ** 

Folder:  ** template/inc_js/qtip/* ** 

**Condtion:** --


----
----
\\

===== Installation =====

Copy both files into the directory  %%/template/inc_js/qtip/%%

In the file qtip.css the appearance of the box can be adjusted.

<code css|h qtip.css |h>
div#qTip {
 padding: 3px;
 border: 1px solid #666;
 border-right-width: 2px;
 border-bottom-width: 2px;
 display: none;
 background: #FFF9DF; /* #999; */
 color: #444; /*#FFF; */
 font: normal 10px Verdana, Arial, sans-serif;
 text-align: left;
 position: absolute;
 z-index: 1000;
}
abbr.glossary, abbr.myClass {
 border-bottom: dotted;
 border-color: #666;
 border-width: thin;
 cursor: help;
}
</code>

In the file qtip.js you can be set which TAGs to be triggered, here for example %%qTipTag = "a,label,input,abbr"%%. \\
The position of the output is also set here. //(qTipX und qTipY)//.

<code js|h qtip.js |h>
// qTip - CSS Tool Tips - by Craig Erskine
// http://qrayg.com
//
// Multi-tag support by James Crooke
// http://www.cj-design.com
//
// Inspired by code from Travis Beckham
// http://www.squidfingers.com | http://www.podlob.com
//
// Copyright (c) 2006 Craig Erskine
// Permission is granted to copy, distribute and/or modify this document
// under the terms of the GNU Free Documentation License, Version 1.3
// or any later version published by the Free Software Foundation;
// with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
// A copy of the license is included in the section entitled "GNU
// Free Documentation License".

var qTipTag = "a,label,input,abbr"; //Which tag do you want to qTip-ize? Keep it lowercase!//
var qTipX = 0; //This is qTip's X offset//
var qTipY = 25; //This is qTip's Y offset//

//There's No need to edit anything below this line//
tooltip = {
  name : "qTip",
  offsetX : qTipX,
  offsetY : qTipY,
  tip : null
}

tooltip.init = function () {
	var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";
	if(!tipContainerID){ var tipContainerID = "qTip";}
	var tipContainer = document.getElementById(tipContainerID);

	if(!tipContainer) {
	  tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");
		tipContainer.setAttribute("id", tipContainerID);
	  document.getElementsByTagName("body").item(0).appendChild(tipContainer);
	}

	if (!document.getElementById) return;
	this.tip = document.getElementById (this.name);
	if (this.tip) document.onmousemove = function (evt) {tooltip.move (evt)};

	var a, sTitle, elements;
	
	var elementList = qTipTag.split(",");
	for(var j = 0; j < elementList.length; j++)
	{	
		elements = document.getElementsByTagName(elementList[j]);
		if(elements)
		{
			for (var i = 0; i < elements.length; i ++)
			{
				a = elements[i];
				sTitle = a.getAttribute("title");				
				if(sTitle)
				{
					a.setAttribute("tiptitle", sTitle);
					a.removeAttribute("title");
					a.removeAttribute("alt");
					a.onmouseover = function() {tooltip.show(this.getAttribute('tiptitle'))};
					a.onmouseout = function() {tooltip.hide()};
				}
			}
		}
	}
}

tooltip.move = function (evt) {
	var x=0, y=0;
	if (document.all) {//IE
		x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
		y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
		x += window.event.clientX;
		y += window.event.clientY;
		
	} else {//Good Browsers
		x = evt.pageX;
		y = evt.pageY;
	}
	this.tip.style.left = (x + this.offsetX) + "px";
	this.tip.style.top = (y + this.offsetY) + "px";
}

tooltip.show = function (text) {
	if (!this.tip) return;
	this.tip.innerHTML = text;
	this.tip.style.display = "block";
}

tooltip.hide = function () {
	if (!this.tip) return;
	this.tip.innerHTML = "";
	this.tip.style.display = "none";
}

window.onload = function () {
	tooltip.init ();
}
</code>

\\

==== Template ====

Integrating the two files "qtip.css" and "qtip.js": 


<code html template>
<!-- CSS: {TEMPLATE}inc_js/qtip/qtip.css -->
<!-- JS: {TEMPLATE}inc_js/qtip/qtip.js -->
</code>

\\

===== Application =====

For example in the source code is given: 

<code html>
<abbr class="myClass" title="<p>Dies ist ein <b>Titeltext</b><br /> in zwei Zeilen.</p> <p>Ein neuer Absatz.</p>">Text</abbr>

</code>
\\

The script generates:
<code html>
<abbr tiptitle="&lt;p&gt;Dies ist ein &lt;b&gt;Titeltext&lt;/b&gt;&lt;br /&gt; in zwei Zeilen.&lt;/p&gt; &lt;p&gt;Ein neuer Absatzt.&lt;/p&gt;" class="myClass">Text</abbr>

</code>

All items concerned will be changed into Entities by the script and "title" will be rewritten into "tiptitle".

In case that JS isn't switched on by the client the original text including the HTML-tags will be displayed. \\
You have to decide if you want to apply any formatting or not. Client's JS has to be switched o for formatting purposes. 

Additionally all Bots will catch the title with all HTML tags. Whether this is a disadvantage or not can't be told so far.

Annotation: There isn't any reliable method to check for client's JS being on or off via PHP //(It's working with page forwarding via JS though ....)//.  


\\

==== Download ====

{{:deutsch:andere-erweiterungen:qtip.zip|}}

\\