TOOLS - Tooltip

Für JQuery gibt es auch gute Erweiterungen wie zum Beispiel JQuery TOOLS. Dieses Addon gibt euch die Möglichkeit einfach Tooltips, Tabs, Overlays(ähnlich wie Lightbox) usw. einzubinden. In diesem Tutorials wird es um die Tooltips gehen.

  1. Zuerst müsst ihr euch die Addon-Datei herunterladen. Dies könnt ihr hier. Ihr könnte dabei selber auswählen welche Features ihr haben wollt, damit die .js-Datei möglichst klein bleibt. Stellt alles so ein wie ihr möchtet. Bitte wählt beim Tooltip zusätzlich den Slife effect an.
  2. Diese Datei bindest du unter der Stelle ein wo du bereits das Haupt JQuery-Script eingebunden hast:
  3. Wenn alles erledigt ist, erstellst du wieder eine .js-Datei, in der wir jetzt arbeiten.
  4. Und schreibst folgendes in diese Datei.

    		$(document).ready(function() { 
			
			// unser JQuery-Skript!
			
		});

    Diese Datei öffnest du jetzt im Editor!

CSS anpassen

Der Tooltip muss vorerst gestaltet werden, wichtig dabei ist das Attribut display:none;. Schreibt in eure CSS-Datei folgenden Code. Ihr dürft und sollt ihn gerne anpassen! 
.tooltip { 
    background-color:#000; 
    border:1px solid #fff; 
    padding:7px 10px; 
    display:none; 
    color:#fff; 
    text-align:left; 
    font-size:11px; 
    -moz-box-shadow:0 0 10px #000; 
    -webkit-box-shadow:0 0 10px #000; 
	position:absolute;
	z-index:10000;
}

Html-Datei

Zusätzlich müssen noch Änderungen in der Html-Datei vorgenommen werden, in der ihr euren Tooltip einbindet. Schreibt bitte am Ende des Body-Tags d.h. kurz vor </body> folgenden Code:

Einfacher Tooltip

Möchtet ihr nur eine kleine Linkbeschreibung eingeben d.h. keine Html-Tags verwenden, ist es sinnvoll die Anzeige über den Title zu schalten. Dazu schreibt ihr in eure eigene .js-Datei folgendes: 
$(document).ready(function() { 
	$(".mittip a[title]").tooltip({ 
		position: "bottom right", 
		offset: [0, -30], 
		opacity: 0.7,
		tip: '.tooltip'
	});
});
Alle a-Elemente der Klasse mittip bekommen jetzt einen Tooltip, der sich nach ihren Title-Attribut richtet. Die Position des Tooltips könnt ihr mit position bestimmen. Es gilt dabei wieder die CSS-Regeln. Außerdem die Offset-Position d.h. die Verschiebung. Ich habe den Tip noch ein wenig nach links verschoben. Die Sichtbarkeitsstärke könnt ihr mithilfe von opacity bestimmen (Werte von 0-1). [BEISPIEL]

Html Tooltip

Manchmal möchte man auch größere Tooltips machen, die Html beinhalten. Das könnte beispielsweise auch ein ausklappbares Menü sein.

Dazu fügt ihr in eure Html-Datei hinter den Link, der den Tooltip haben soll einen div-Container der Klasse .tooltip ein. z.B.: 
Talwy


	fette Schrift

	Ein Link im Tooltip

	Text Text Text

Außerdem solltet ihr eine Klasse definieren für alle Html-Tooltips, ich habe sie hier .mithtmltip genannt. In eure .js-Datei kommt nun folgender Code: 
$(document).ready(function() { 
	$(".mithtmltip").tooltip({ 
		position: "top right", 
		offset: [0, -30], 
		opacity: 0.7
	});
});
Die Attribute funktionieren genau wie beim einfachen Tooltip! [BEISPIEL]

Das war es auch schon. Es gibt noch viele nette Erweiterungen, welche ihr auf der TOOLS-Seite nachschlagen könnt.

Fragen (0, davon 0 beantwortet)


Kommentare (4)

Autor Kommentar
Usagi
 

Super Tutorial ... ich benutz es jetzt für meinem WP Blog.
Im Tutorial steht nicht das man die selbst erstellte .js Datei auch einbinden muss.
Deswegen hat es bei mir erstmals nicht gefunzt. xD
am 16.05.2010 um 18:13 [OFFLINE] [NACHRICHT] [PROFIL]
saki
 

total tolles tutorial und einfach (genug) erklärt :D werde ich aufjedenfall mal benutzen, diesen tooltip :DD danke ~ˆˆ~ und weiter so!! :)
am 28.03.2010 um 20:54 [OFFLINE] [NACHRICHT] [PROFIL]
Delite
(Admin)
 

Der Server ist öfter mal down. Der wird später wieder gehen ˆˆ
am 18.03.2010 um 16:47 [OFFLINE] [NACHRICHT] [PROFIL]
Coco
 

Die Adressen funktionieren leider nicht mehr lg
am 18.03.2010 um 16:34 [OFFLINE] [NACHRICHT] [PROFIL]
« Zurück