Projekt-jQuery-Tooltip

jQuery-Tooltip

Ein einfacher Tooltip, der nicht wie sonst üblich das Title-Attribut des A-Tags benutzt. Das Plug-In erzeugt einen Span-Tag, der einen vorher definierten Text ausgibt. Ist das Hover-Event beendet, löscht sich das Span-Tag selbtändig.

$(document).ready(function()
{
  $('.tooltip').tooltip({TooltipTxt : 'MyText'});
});
Example
Example

Html-Code


  <a href="#" class="tooltip">Mein Tooltip</a>

Bindet das Plugin einfach an den A-Tag der einen Tooltip ausgeben soll. Dabei können die üblichen Selectoren genutzt werden.

//variable für den Text euers Tooltips
var txt = 'Mein Tooltiptext';

//Aufruf
$('.tooltip').tooltip({TooltipTxt : txt});

//Beispiel mit id
$('#MyId').tooltip({TooltipTxt : txt}):

Css-Default

/*--Tooltip Styles--*/
.tip 
{
  display:none; /*--Hides by default--*/
  padding:10px;
  position:absolute;	
  background: rgba(68, 68, 68, 0.8);
  color: #fff;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

In den Default-Einstellungen wird vom Plugin ein Span-Tag mit der class tip erzeugt.

<span class="tip"></span>

Wird eine andere Class gebraucht, weil ihr class="tip" schon vergeben habt, so stellt das auch keinen Hindenis dar. Mit der Option TooltipCss kann dem
Plugin der neue Class-Name mitgeteilt werden.

var txt = 'Mein Tooltiptext'; 
$('MyClass').tooltip({TooltipTxt : txt, TooltipCss : 'MyAlternativClass'});