jQuery Plugin qTip

- , ,

Heute ist der erste Release Candidate vom jQuery Plugin qTip rausgekommen. Es ermöglicht einem auf einfache Art und Weise coole Tooltips zu bauen ohne dafür grossen Aufwand betreiben zu müssen. Es bieted aber nicht nur die Möglichkeit einfach und schnell Tooltips zu erstellen sondern erlaubt es auch duch die API Schnittstelle die Funktionalität vollkommen zu dynamisieren oder auch erweitern.

// Einfaches Tooltip über alle Links
$('a').qtip({ content: 'Mein Tooltip' });

// Tooltip mit dynamischen Inhalt
$("#dynamisches_tooltip").qtip({
	content: {
		url: 'localcontent.html'
	}
});

Man kann die Tooltips aber auch nach belieben gestalten über das style Attribut:

$("gestyltes_tooltip").qtip({
	content: 'Dieses Tooltip ist hübsch',
	style: {
		width: 500,
		padding: 5,
		background: '#ccc',
		color: 'black',
		textAlign: 'center',
		border: {
			width: 7,
			radius: 2,
			color: '#fff'
		}
	}
});

Es gibt aber auch vorgefertigste Styles, welche man einfach über style.name aktivieren kann und man nur noch gewisse kleinigkeiten anpassen/überschreiben muss.
Zudem bieted das API Attribut diverse Callbacks welche man erstellen kann. Ein keines Beispiel:

$('#api_funktionen').qtip({
	content: 'mein Inhalt',
	api: {
		onFocus: function ()
		{
			// Bei Mousover färbt sicht das Element rot
			this.css('color','red');
		}
	}
})

Alles in allem ein sehr gelungenes Plugin mit vielen Möglichkeiten es zu erweitern. Zudem steht der Ersteller im Forum aktiv zur Rede und Antwort.

  1. Ist es denn wirklich gut, das aussehen von Standard-Tooltips zu verändern? Mit den Standard-Tooltips weiß jeder User sofort was gerade passiert, und warum es passiert.
    Ich persönlich mag es nicht, wenn zuviel von meinem Interface, das ich mir ausgesucht habe, auf einer Webseite verändert wird.

  2. Jan sagt:

    du Veränderst damit nicht das Interface des Users Grundsätzlich… sonder hast hald die Möglichkeit einfach einen Layer einzublenden … ob du den, dann wie ein Tooltip aussehen läst ist dir überlassen.

  3. Ok, kam nur so rüber dass man damit _alle_ Tooltips, also auch z.b. die von Links (alt-parameter) ersetzen will. Wenn man gezielt “schicke” Tooltips einbauen möchte, und eh schon jquery irgendwo einsetzt, ist das natürlich ne tolle Sache ;)

    Grad noch nen Lizenz-Check gemacht: MIT licence – perfekt ;)

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>