jQuery UI Tooltip Plugin

15 Maggio 2009 da Dave. 8 Commenti »

UPDATE: Vi è ora una pagina dedicata: vTip jQuery .

Abbiamo guardato intorno per un plugin di jQuery tooltip piacevole e non riuscì a trovare uno che ci adatto, e ci voleva in particolare jQuery UI di integrazione in modo che il design si fa con qualsiasi tema che si sono a rotazione .

Per usarlo attaccare una classe di vtip a qualsiasi elemento, e dargli un titolo. Ad esempio, <a title="This class="vtip" href="test.html" è il Link <tooltip!"> / a>.

Ecco il codice, sentitevi liberi di usarlo e mandaci un backlink se ti interessa:

 / ** Vertigo da Tip-project.com Richiede www.vertigo (tipo di) jQuery UI, e (sicuramente) * jQuery / this.vtip = function () (xOffset = 5; / / distanza x dalla yOffset mouse = 20; / / y la distanza dal mouse $ (". vtip"). hover (function (e) (this.t = this.title; this.title =''; / / stop il titolo effettivo mostrando $ ('corpo'). append ('' + this.t + ''); $ ('p # vtip'). css ("display", "none") / / nascondere. css ("posizione", "assoluto"). css ( "opacità", "0.9"). css ("padding", "10px") / / stile. css ("top", (e.pageY yOffset +) + "px"). css ("sinistra", (e . pageX xOffset +) + "px") / / posizione. FadeIn ("veloce") / / lo mostriamo), function () (this.title = this.t; / / imposta il titolo dietro $ ("# p vtip "). remove ();)). MouseMove (function (e) ($ (" # vtip p "). css (" top ", (e.pageY - xOffset) +" px "). css (" a sinistra ", (e.pageX yOffset +) +" px ");));); jQuery (documento). ready (function ($) (vtip ();))