What a beautiful link!

TitleTip ist ein simples Tooltip-Plugin für jQuery. Es erlaubt das Anzeigen eines Tooltips bei Links. Als Tooltip-Text wird hierbei der Inhalt des Title-Attributes ausgelesen. Die Anzahl an titleTips ist unbegrenzt.

TitleTip ist frei verfügbar und kann von jedem weiterverbreitet, weiterentwickelt und verbessert werden.

Installation

  1. Laden Sie sich die aktuelle Version von titleTip herunter.
  2. Entpacken Sie das Archiv.
  3. Binden Sie die alle Skripts und Stylesheets in Ihre Webseite ein. (Achten Sie darauf, dass der Pfad korrekt angegeben ist.)
    <link rel="stylesheet" type="text/css" href="titletip.css" />
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="titletip.jQuery.js"></script>
  4. Rufen sie die Funktion titleTip(); auf
    <script type="text/javascript">
    $(document).titletip();
    </script>
  5. Geben Sie dem gewünschten Link die Klasse "titletip" sowie einen Titel.
    <a href="#" class="titletip" title="Your Statement here">Link to Somewhere</a>

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>titleTip - jQuery Tooltip</title>

<link rel="stylesheet" type="text/css" href="titletip.css" />

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="titletip.jQuery.js"></script>

<script type="text/javascript">
$(document).titletip();
</script>
</head>

<body>
<a href="#" class="titletip" title="Your Statement here">Link to Somewhere</a>
</body>
</html>

CSS

.titletip {
	}

.titletip-area {
	background: url(arrow.png) no-repeat center bottom; /* Optional: Tooltip-arrow arrow.png */
	display: block; /* Required */
	position: absolute; /* Required */
	padding: 0 0 5px 0; /* Optional: Height of tooltip-arrow */
	margin: 0 0 15px 0; /* Required */
	}
	
.titletip-area span {
	background: #99cc00; /* Optional: Tooltip background color */
	-moz-border-radius: 4px; /* Optional: Border-radius for mozilla browsers */
	-webkit-border-radius: 4px; /* Optional: Border-radius for webkit browsers */
	padding: 10px; /* Optional: Tooltip padding */
	display: block; /* Required */
	font: 13px Arial, Helvetica, sans-serif; /* Optional: Tooltip font and typeface */
	color: #333; /* Optional: Tooltip text color */
	}

Bekannte Probleme

Derzeit kann titleTip nicht auf Elemente mit einem negativen "text-indent" angewendet werden.