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.