Tooltip will nicht...

Metty · 15.01.2013

hi

ich hänge schon seid knapp 2 std dran und kriege das einfach nicht hin....

hier mal der code:

PHP:

var tip = $('<div>').addClass('tip').appendTo('body');
    $('body:has(div.folio)').on('mousemove', function(e){
        if(tip.alt != e.target.alt)tip[e.target.alt?'show':'hide']().html(tip.alt = e.target.alt);
        if(tip.alt)tip.css({left: e.pageX+15, top: e.pageY+15});
    });

und so spuck ich es aus..

HTML:

.tip{position:absolute;z-index:99;top:-99px;left:0;background:#404040;padding:5px 10px;color:#eee;font-size:1.3em;border-radius:3px}

HTML:

<a alt="Hallo Welt" title="" rel="Hallo Welt" href="#">Hallo</a>

wer super wenn mir jemand helfen könnte...

MFG Metty

rafoldi · 16.01.2013

AW: Tooltip will nicht...

Hi Metty

sieht im erste Quellcode nach PHP aus

Habe diesen Eintrag im gefunden, da wird der Tooltip über CSS erzeugt. Ist nur ein Vorschlag.

Code:

a[COLOR=#6666ff].tooltip[/COLOR] [COLOR=#00AA00]{[/COLOR][COLOR=#000000][B]text-decoration[/B][/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#993333]none[/COLOR][COLOR=#00AA00];[/COLOR][COLOR=#00AA00]}[/COLOR] [COLOR=#6666ff].tooltip[/COLOR] span[COLOR=#6666ff].info[/COLOR][COLOR=#00AA00]{[/COLOR][COLOR=#000000][B]display[/B][/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#993333]none[/COLOR][COLOR=#00AA00];[/COLOR][COLOR=#00AA00]}[/COLOR] [COLOR=#6666ff].tooltip[/COLOR][COLOR=#3333ff]:hover [/COLOR]span[COLOR=#6666ff].info[/COLOR][COLOR=#00AA00]{[/COLOR][COLOR=#000000][B]display[/B][/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#993333]block[/COLOR][COLOR=#00AA00];[/COLOR]position[COLOR=#00AA00]:[/COLOR][COLOR=#993333]absolute[/COLOR][COLOR=#00AA00];[/COLOR] [COLOR=#000000][B]width[/B][/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#933]200px[/COLOR][COLOR=#00AA00];[/COLOR] [COLOR=#000000][B]height[/B][/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#933]200px[/COLOR][COLOR=#00AA00];[/COLOR][COLOR=#00AA00]}[/COLOR]

Duddle · 16.01.2013

AW: Tooltip will nicht...

Code:

tip[e.target.alt?'show':'hide']().html(tip.alt = e.target.alt);

Was soll diese Zeile ausdrücken / bewirken?

Edit: okay, hab es verstanden. Es hilft wirklich ungemein, wenn du kein Codegolf betreibst wenn du nach Hilfe fragst.

Edit2: hab es etwas auseinanderklamüsert und die Getter benutzt, ansonsten die Logik aber nicht verändert. Bei mir funktioniert es:

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>
		<title>Page Title</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css" media="screen">
		    .tip{position:absolute;z-index:99;top:-99px;left:0;background:#404040;padding:5px 10px;color:#eee;font-size:1.3em;border-radius:3px}
		</style>
		<script type="text/javascript" language="javascript" charset="utf-8">
		    $(document).ready(function() {
			var tip = $('<div>').addClass('tip').appendTo('body');
			$('div.folio').on('mousemove', function(e){
			    var eAlt = e.target.getAttribute("alt");
			    var tAlt = tip.attr("alt");
			    if(eAlt != tAlt) {
			    	tip.attr("alt", eAlt);
				eAlt ? tip.show() : tip.hide();
				tip.html(eAlt);
			    }
			    if(tAlt) tip.css({left: e.pageX+15, top: e.pageY+15});
			});  
		    });
		</script>
	</head>

	<body>
	    <div class="folio">
		<a alt="Hallo Welt" title="" rel="Hallo Welt" href="#">Hallo</a><br>
		<a title="" rel="Hallo Welt" href="#">Welt</a>
	    </div>
	</body>
</html>

Duddle

Metty · 16.01.2013

AW: Tooltip will nicht...

ahh super danke Duddle..
jetzt funzt das einwandfrei ob bilder oder texte beides gehen jetzt super...

eine frage hätte ich noch...
und zwar sehe ich auf der seite jquery mehrere jquery dateien..

einmal 1.9.0 , 1.7.2 und so weiter, muss man immer das neuste runterladen um sachen einzeigen zulassen oder spielt es da keine rolle..

Duddle · 16.01.2013

AW: Tooltip will nicht...

Die verschiedenen Versionen haben teilweise verschiedene Funktionen, Optimierungen, usw. Das siehst du jeweils im Changelog des Releases. Wenn ein Script eine bestimmte Mindestversion benötigt, steht das dabei. Wenn du nie updatest, wird deine Seite trotzdem genau so wie vorher funktionieren.

Duddle

Metty · 16.01.2013

AW: Tooltip will nicht...

aso ok jetzt habe ich es verstanden.

danke dir Duddle..

MFG Metty