Einfacher JS-ToolTip <abbr>

Ein einfacher JavaScript “Tool-Tip” der den Title-Tag innerhalb des Inline-Elements <abbr> in formatierbaren Text umsetzt.
(ABBR: Inline-Element für Abkürzung im Text)



V1.0 24.08.2011

Docu: –
Forum: –

Autor: Craig Erskine http://qrayg.com
Erweitert: K.Heermann (flip-flop) http://planmatrix.de

CMS Version: >= 1.3
Version: V1.0

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

Dateinamen: qtip.css, qtip.js

Verzeichnis: template/inc_js/qtip/*

Bedingung:




Installation

Kopiere beide Dateien in das Verzeichnis /template/inc_js/qtip/

In der Datei qtip.css kann das Aussehen der Box angepasst werden.

qtip.css

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

In der Datei qtip.js kann eingestellt werden, auf welche TAGs getriggert werden soll, hier z.B. qTipTag = "a,label,input,abbr".
Die Position der Ausgabe wird ebenfalls hier eingestellt. (qTipX und qTipY).

qtip.js

// 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 ();
}


Template

Einbinden der beiden Dateien “qtip.css” und “qtip.js”:

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


Anwendung

Im Quelltext wird z.B. angegeben:

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


Das Script generiert daraus:

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

Alle betreffenden Zeichen werden vom Script in Entities gewandelt und “title” in “tiptitle” umgeschrieben.

Ist nun JavaScript auf dem Client nicht eingeschaltet wird der Ursprungstext mit den HTML-Steuerzeichen ausgegeben.
Man muss sich also entscheiden, ob mit oder ohne Formatierung gearbeitet werden soll. Für die Formatierung muss JS auf dem Client eingeschaltet sein.

Dazu kommt noch, dass alle Bots natürlich den “title” mit den HTML-Steuerzeichen aufnehmen. In wie weit das ein Nachteil ist, kann ich nicht sagen.

Anmerkung: Es gibt keine wirklich zuverlässige Methode um mit PHP festzustellen ob JS auf dem Client ein- oder ausgeschaltet ist (Geht nur über Seitenweiterleitung per JS ….).


Download

qtip.zip (2.42 KiB, 58 downloads)


deutsch/andere-erweiterungen/simpel-tooltip-abbr.txt · Last modified: 2018/06/03 18:09 (external edit)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0