Funktionen & Template » Tooltips über bestimmten Textstellen

Florians Forum � Webmaster � Xobor (Homepagemodules & Dynamicboard) � Funktionen & Template � Tooltips über bestimmten Textstellen

Seite 1 von 3 � Seite 1 2 3 Seite �

Themen-Einstellungen

Thema drucken

Bereich wechseln

#1 | Tooltips über bestimmten Textstellen datum

24.01.2008 17:42 (zuletzt bearbeitet: 09.10.2013 01:16)

florian-zier

Administrator

Informationen anzeigen

Beitr�ge:	837
Punkte:	1895
Registriert seit:	19.04.2007
Wohnort:	Oberkirch

Update: In Beitrag #32 ist inzwischen die Zusammenfassung einer �berarbeiteten Variante verf�gbar. Sie ist abw�rtskompatibel zu den alten Tooltips.

�berarbeitet:

Auch hier im Forum muss auf Features wie Tooltips nicht verzichtet 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 nicht an einer festen Stelle vom Rand aus angezeigt werden und mit JavaScript anstatt mit CSS funktionieren.

Die �nderungen erfolgen im Template Element "Obere Leiste":

Dieser Style muss zwischen den Head-Tags eingef�gt werden:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<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";
}
 
// Tooltip-Abfrage für die Symbol-Bar
function tooltip_insert() {
	Check = confirm(unescape("Soll ein Link mit Tooltip eingef%FCgt werden?nBei Abbrechen wird der Text nicht verlinkt."));
	if(Check == false){
		tooltip_text = prompt(unescape("Der Text, %FCber dem der Tooltip angezeigt wird:", ""));
		tooltip_info = prompt(unescape("Text im TooltipnHinweis: Der Text kann nachtr%E4glich noch formatiert werden!", ""));
		var tooltip_tags = '[tipp]'+tooltip_text+'[info]'+tooltip_info+'[/tipp]';
		returnTag(tooltip_tags);
	}
	else{
		url_link = prompt("Link-Adresse:", "http://");
		tooltip_text = prompt(unescape("Der Text, %FCber dem der Tooltip angezeigt wird:", ""));
		tooltip_info = prompt(unescape("Text im TooltipnHinweis: Der Text kann nachtr%E4glich noch formatiert werden!", ""));
		var tooltip_tags = '[tipp]'+'[url='+url_link+']'+tooltip_text+'[/url]'+'[info]'+tooltip_info+'[/tipp]';
		returnTag(tooltip_tags);
	}
}
</script>
 

Im Unterschied zu dem Skript f�r die Homepage ist hier eine weitere Funktion eingebaut, die das Einf�gen von Tooltips im Forum �ber die Symbol-Bar erleichtert.

Nun m�ssen die Foren-Codes angegeben werden:

1
2
3
 
[tipp]
� ersetzen mit �
<span class="tooltip_text" onMouseOver="tooltip_open(this)" onMouseOut="tooltip_close()">
 

1
2
3
 
[info]
� ersetzen mit �
<span class="tooltip">
 

1
2
3
 
[/tipp]
� ersetzen mit �
</span></span>
 

F�r die betreffende Textstelle und im Tooltip selbst k�nnen Foren-Codes verwendet werden. Somit k�nnen Bilder mit Tooltips versehen, oder sogar in den Tooltip eingef�gt werden.

F�r die User in der Symbol-Bar folgender Quellcode einf�gen:

1
 
<A HREF="javascript:tooltip_insert()"><img src="http://img.homepagemodules.de/information.gif" title="Zeigt Zusatzinfos beim überfahren eines Textes an." border=0 width="16" height="16"></A>

Um eine Textstelle zu verlinken, die einen Tooltip beinhalten soll, gen�gt es einen Verweis um die Textstelle zu legen.

1
 
[tipp][url=Linkadresse]verlinkte Textstelle[/url][info]Dieser Text steht im Tooltip.[/tipp]

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.

Bilder k�nnen folgenderma�en eingebaut werden:

1
 
[tipp][img]Bildadresse[/img][info]Dieser Tooltip gehört zu einem Bild.[/tipp]

Die Tooltips werden nicht �ber den Seitenrand hinaus angezeigt.
Ist ein Text zu weit au�en, werden einfach mehrere Umbr�che eingef�gt.

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.

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Bitte geben Sie einen Grund f�r die Verwarnung an