Beispiele

Schönere Tooltips

Es gibt bereits ein Script von Kryogenix, das automatisch alle title-Attribute einer Seite in nicetitle-Attribute umwandelt und dieses selbstgeschaffene Attribut dann bei Mouseover als Tooltip anzeigt. Der Vorteil ist zum einen, daß man so auch längere Texte anzeigen kann als bei den standardmäßigen title-Attributen und daß man den Hinweis per CSS frei gestalten kann.

Dieses Script habe ich ein wenig angepaßt und erweitert und daraus die Klasse NiceTitles gebaut, die auf den Controller abgestimmt ist. Ein kleines Beispiel zeigt sie im Einsatz.

HTML-Quellcode der Seite "Tooltips"Quellcode zeigen Quellcode ausblenden

<p><abbr title="Abkürzung für: Lorem ipsum">L.i.</abbr> dolor sit amet, consectetuer adipiscing elit. <dfn title="mauris: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.">Mauris</dfn> pulvinar pretium ante. <a href="http://www.google.de/search?hl=de&amp;q=%22Mauris+augue%22&amp;btnG=Google+Search" title="Suche den Begriff &quot;Mauris augue&quot; bei Google">Mauris augue</a>. Suspendisse dolor. Sed eu velit sit amet odio elementum ullamcorper. Phasellus <dfn title="ligula: Proin mattis faucibus eros. Pellentesque mattis, mi quis dignissim aliquet, felis elit mattis mi, ac blandit tellus risus nec tortor. Duis ultrices mollis sem.">ligula</dfn> risus, consequat et, cursus et, commodo a, augue. Vivamus eleifend, velit vel bibendum venenatis, sem magna tristique ante, vel dictum quam risus ac nisl.</p>
<div id="tooltip"></div>

Wie bei den anderen Beispielen auch beschränkt sich das notwendige Javascript im Seitenkopf auf ein paar wenige Zeilen. Es geht eigentlich nur darum, nach dem Laden der Seite die benötigten Objekte zu initialisieren. In unserem Beispiel werden neben DFN- auch ABBR- und A-Elemente manipuliert und so mit den selbstgebauten Tooltips versehen. Die zu berücksichtigenden Elementtypen werden der Methode init der Klasse NiceTitles einfach als Array übergeben.

Lokales Javascript der Seite "Tooltips"Quellcode zeigen Quellcode ausblenden

var myController, myNiceTitles;
function initLocalObjects() {
	var myNiceTitles = new NiceTitles('tooltip');
	myNiceTitles.init(new Array('dfn', 'abbr', 'a'));
	var myController = new Controller();
	myController.registerEvents(new Array('mouseover', 'mouseout', 'mousemove'));
	myController.registerClient(myNiceTitles);
}
addLoadEvent(initLocalObjects);

Wie der Tooltip nun konkret aussieht, läßt sich dann wunderbar über CSS-Stylesheets steuern.

CSS-Stylesheet der Seite "Tooltip"Quellcode zeigen Quellcode ausblenden

#tooltip { position:absolute; top:0; left:0; visibility:hidden; border:1px solid #aaa; background:#f0f0f0; color:#666; font-size:0.7em; width:200px; padding:2px; }
abbr, dfn { border:0; border-bottom:1px dotted #aaa; background:#f9f9f9; }

Das Beispiel zeigt, wie so etwas aussehen kann.

Denkbar ist auch, verschiedene Formatierungen etwa für DFN- und A-Elemente zu verwenden. Dies könnte man durch Einsatz zweier Instanzen der Klasse NiceTitles erreichen oder durch eine Änderung der Klasse dahingehend, daß man für die verschiedenen Elementtypen verschiedene CSS-Klassen angeben kann, die auf das Tooltip-Element angewendet werden. Eine weitere nette Ergänzung wäre es, dafür zu sorgen, daß der Hinweis erst nach einer leichten Verzögerung eingeblendet wird (so wie es mit den Untermenüs bei der Klasse DynamicMenu gemacht wird.

Kommentare zu dieser Seite

(Keine Kommentare vorhanden.)

Kommentarfunktion ausgeschaltet

Ich würde eigentlich gerne Benutzern der JS-Pocket-Lib und anderen Entwicklern die Möglichkeit bieten, schnell und bequem Kommentare und Anregungen hier zu hinterlassen, denn so ein Feedback ist sehr wichtig für die Verbesserung der Bibliothek. Da aber bereits nach wenigen Tagen die Kommentarfunktion, die ich eingebaut hatte, von zerstörungswütigen Vollidioten massivst zum Spamming mißbraucht wurde und ich auf der anderen Seite daraus auch keinen Hochsicherheitstrakt machen wollte, habe ich die Kommentarfunktion wieder entfernt. Sorry an alle normalen Besucher und fuck yourself, Spammers!