#1 Tooltips über bestimmten Textstellen von florian-zier 24.01.2008 17:14

avatar
Überarbeitet:

Auf der eigenen Homepage können Tooltips dazu verwendet werden, um Zusatzinfos zu einem Wort oder einer Textstelle zur Verfügung zu stellen.
Ein Beitrag aus dem Forum von Wolfgang hat mich für eine Eigenumsetzung inspiriert.
Der Unterschied liegt darin, dass die Tooltips Das hier ist ein Tooltip!
Er enthält die Info, dass diese Textstelle verlinkt ist. :-D
Ein Klick führt zur Erklärung des Begriffes im Online-Lexikon Wikipedia.
nicht an einer festen Stelle vom Rand aus angezeigt werden und mit JavaScript anstatt mit CSS funktionieren.


(Tooltips für das Forum)Hier gibt es die Anleitung, um Tooltips auch im Forum einzubinden.


Dieser Style muss zwischen den Head-Tags eingefügt werden:
<style type="text/css">
/* Tooltips */
.tooltip {
top:-500px;
left:-500px;
margin-top:0px;
position: absolute;
display: none;
z-index:1;
background-color: #FFFFFF;
padding: 3px;
text-decoration:none;
font-size: 11px;
font-weight: normal;
border:1px solid;
}
.tooltip_text {
cursor:help;
border-bottom:1px dotted;
}
</style>



Die Textstellen, die Tooltips enthalten, sind in Zukunft mit einer punktierten Linie unterlegt.
Das Design kann jederzeit angepasst werden.


Auch dieses Skript kommt zwischen die Head-Tags:
<script type="text/javascript" language="javascript">
// Tooltips
ttip = null;
document.onmousemove = ttip_position;
function ttip_position(e) {
// IE, Opera : Firefox
x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
y = (document.all) ? window.event.y + document.body.scrollTop : e.pageY;

// Überprüfung auf Opera
if (window.opera) {
if (ttip != null) {
ttip.style.left = (x + 45) + "px"; // x-Wert für Opera
ttip.style.top = (y + 45) + "px"; // y-Wert für Opera
}
} else {
if (ttip != null) {
ttip.style.left = (x + 20) + "px";
ttip.style.top = (y + 20) + "px";
if (navigator.appName == 'Microsoft Internet Explorer') {
if (ttip_breite_anfang+x+20 >= document.body.clientWidth) {
ttip.style.width = document.body.clientWidth-x-25;
}
else {
ttip.style.width = ttip_breite_anfang;
}
}
}
}
}
function tooltip_open(tip) {
ttip = tip.getElementsByTagName('span')[0];
ttip.style.top = "-500";
ttip.style.left = "-500";
ttip.style.display = "block";
ttip.style.width = "";
ttip_breite_anfang = ttip.offsetWidth;
}
function tooltip_close() {
ttip.style.display = "none";
}
</script>





Im Inhaltsteil der Homepage können nun alle Textstellen, die mit Tooltip versehen werden sollen, folgendermaßen eingefügt werden:
<span class="tooltip_text" onMouseOver="tooltip_open(this)" onMouseOut="tooltip_close()">Textstelle<span class="tooltip">Inhalt des Tooltips</span></span>

Für die betreffende Textstelle und im Tooltip selbst kann HTML verwendet werden. Somit können Bilder mit Tooltips versehen, oder sogar in den Tooltip eingefügt werden.


Um eine Textstelle zu verlinken, die einen Tooltip beinhalten soll, genügt es einen Verweis um die Textstelle zu legen.
<a href="Link-Adresse">Textstelle</a>

Wenn um den ganzen Quellcode der Verweis gesetzt wird, dann wird der Tooltip mitverlinkt und das Design verändert sich.
Der Tooltip kann sowieso nicht angeklickt werden, deshalb sollte der Verweis nur um die Textstelle gelegt werden, um unschöne Design-Veränderungen zu verhindern.


Es können beliebig viele Stellen mit Tooltips eingefügt werden. Die Position kann dabei in einem durchgehenden Text bleiben.
Damit das Skript auch funktioniert, muss JavaScriptErklärung zu JavaScript in Wikipedia. im Browser aktiviert sein.
Xobor Forum Software von Xobor
Einfach ein eigenes Forum erstellen
Datenschutz