Jan 11

DHTML Tooltips

Tag: Javascript — Tobi @ 12:49 pm

Für Tooltips über HTML Elementen nutze ich gern das DHTML Tooltip Script von Mikko Mensonen. Der Vorteil ist, dass sich innerhalb des Tooltip beliebiger HTML Code befinden darf. Das Script lässt sich außerdem sehr einfach einbinden und anwenden.

Zunächst eine kurze Einführung:

Man fügt zuerst das Script im Seitenheader ein, zusammen mit einem Stylesheet, welches das Tooltip und dessen Inhalt formatiert, sowie die Ausgabe der Tooltip Texte auf der Seite verhindert:

<script src="toolTip.js" language="javascript" type="text/javascript"></script>
<link href="tooltip.css" rel="Stylesheet" type="text/css" media="screen" />

tooltip.css sieht wie folgt aus:

.tooltip {
	position:absolute;
	display:none;
	border:1px #000000 solid;
	padding:5px;
	width:350px;
	z-index:2000;
}
.tooltipMouseover {
	position:absolute;
	display:block;
	border:1px #000000 solid;
	padding:5px;
	width:350px;
	z-index:2000;
	top: -100px;
	left: -500px;
}

Als nächstes werden die Tooltip Element innerhalb von <body> eingebunden:

<div class="tooltipsammlung">
<div class="tooltip" id="t_1"><b>Mein Tooltip</b><p>Dies ist mein Beispiel Tooltip</p></div>
</div>

Es werden Elemente definiert (in unserem Fall ein Bild), die beim onmouseover Event einen Tooltip anzeigen und beim onmouseout Event den Tooltip wieder ausblenden sollen:

<a onmouseout="hideTooltip();" onmouseover="initTooltip('t_1');"><img src="images/qmbox.png" height="128" width="128" /></a>

Zuletzt wird noch diese Zeile vor dem schließenden body-Tag </body> eingebunden:

<div id="tooltipMouseover" class="tooltipMouseover"></div>

Und schon funktioniert das Tooltip!

Hier gibt es die benötigten Dateien:

toolTip.js
tooltip.css

Screenshot:

DHTML Tooltip Beispiel

Eine Antwort zu “DHTML Tooltips”

  1. DHTML Tooltip mit nicht auslesbaren Texten | Ajaxschmiede.de sagt:
    Januar 14th, 2008 at 12:12 am

    […] Im letzten Blogpost stellte ich das DHTML Tooltip Script vor. Ich wurde jedoch vor die Ausgabe gestellt, die Tooltip-Texte nicht mehr direkt in den Quelltext abzulegen, sodass sie von Suchmaschinen wie Google nicht ausgelesen werden können. Das bestehende Script wollte ich nicht anrühren, sondern ein eigenes Script (infobox.js) schreiben, welche die gewünschte Funktionalität realisiert. […]

  2. Cheap Oakland Athletics Jerseys sagt:
    Mai 15th, 2018 at 4:53 pm

    Cheap Oakland Athletics Jerseys

    In addition to these tools, you will need an empty container to put all of the items that do not belong and need to be moved into their rightful place. My heart sunk down into my stomach.There are 458 total college clubs listed as NCPA participants. Yo…

  3. Cheap Jerseys China Online Store sagt:
    Juni 26th, 2018 at 1:16 pm

    Cheap Jerseys China Online Store

    Key ingredients in Bluze capsulesThe key ingredients are Kesar, Safed Musli, Akarkra, Kaunch, Salabmisri, Shilajit, Tulsi, Jaipatri, Ashwagandha, Jaiphal, Gokhru, Dalchini, Moti, Semar, Kharethi, Kuchala, Vidarikand, etc. 23 (Xinhua) A rocket fired fro…

  4. Wholesale NFL Football Jerseys sagt:
    Juli 31st, 2018 at 3:45 pm

    Wholesale NFL Football Jerseys

    Acknowledging a must give even more effective as well as budgetfriendly custommade program, active programs, mobile phone application concept and also advancement, and also website design services to increasing services, David established Prosoft Nears…

  5. Cheap NFL Jerseys Wholesale sagt:
    August 11th, 2018 at 2:18 pm

    Cheap NFL Jerseys Wholesale

    24 (Xinhua) FC Barcelona have an injury crisis looming in the wake of Sunday’s narrow win at home to Athletic Club Bilbao.In his efforts to woo farright voters in a tight parliamentary race last week, Netanyahu ruled out a Palestinian state under his…

Hinterlasse einen Kommentar

You must be logged in to post a comment.