[js/ajax] erledigt – tooltip-script für jQuery umschreiben

[topfkanne]

Hi!

Ich hab ganz tief im Netz ein Script für eine Tooltip-Funktion gefunden. Das Script funktionierte erst so, dass er aus dem href-Attribut eines Ankers die DIV-ID des zu "tippenden" DIVs und die Ziel-Datei, worin sich das DIV befinden, ausliest.

Bsp:

<a href="ziel.html#div">Link</a>

Das ganze hab ich mir so umgebaut, dass ich den Link weiterhin als Link mit href nutzen kann und das Ziel-Div einfach im rel-Attribut deklariere.

Like this:

<a href="ziel.html" ref="div">Link</a>

<div class="hidden" id="div">Ich bin der Tooltip :)</div>

So bekomme ich mit mousehover meinen Tooltip und mit onclick komme ich auf die ziel.html (weil ich das return false; aus dem Script entfernt habe (auskommentiert)).

Mein letztes Problem (denke ich): Das Script läd trotzdem die im href angegebene URL und selektiert sich dann das div. Ich möchte aber, dass er einfach im DOM nachschaut und nicht extra über load() ne Seite reinläd.

Kann mir da wer helfen?

Script:

var ajaxtooltip={
	fadeeffect: [false], //enable Fade? [true/false, duration_milliseconds]
	useroffset: [15, 15], //additional x and y offset of tooltip from mouse cursor, respectively
	loadingHTML: '<div style="font-style:italic">Fetching Tooltip...</div>',

	positiontip:function($tooltip, e){
		var docwidth=(window.innerWidth)? window.innerWidth-15 : ajaxtooltip.iebody.clientWidth-15
		var docheight=(window.innerHeight)? window.innerHeight-18 : ajaxtooltip.iebody.clientHeight-15
		var twidth=$tooltip.get(0).offsetWidth
		var theight=$tooltip.get(0).offsetHeight
		var tipx=e.pageX+this.useroffset[0]
		var tipy=e.pageY+this.useroffset[1]
		tipx=(e.clientX+twidth>docwidth)? tipx-twidth-(2*this.useroffset[0]) : tipx //account for right edge
		tipy=(e.clientY+theight>docheight)? tipy-theight-(2*this.useroffset[0]) : tipy //account for bottom edge
		$tooltip.css({left: tipx, top: tipy})
	},

	showtip:function($tooltip, e){
		if (this.fadeeffect[0])
			$tooltip.hide().fadeIn(this.fadeeffect[1])
		else
			$tooltip.show()
	},

	hidetip:function($tooltip, e){
		if (this.fadeeffect[0])
			$tooltip.fadeOut(this.fadeeffect[1])
		else
			$tooltip.hide()
	}

}

jQuery(document).ready(function(){
	ajaxtooltip.iebody=(document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
	var tooltips=[] //array to contain references to all tooltip DIVs on the page
	$('.tooltip').each(function(index){ //find all links with "tooltip" class declaration
		//$(this).click(function(){ return false });
		//var url = jQuery.trim(this.getAttribute('href').split('#')[0]) //get URL of external file
		var url = document.URL; //get URL of external file
		//var div = jQuery.trim(this.getAttribute('href').split('#')[1]) //get div
		var div = this.getAttribute('rel'); //get div
		this.titleurl= url +' #'+ div;
		this.titleposition=index+' pos' //remember this tooltip DIV's position relative to its peers
		tooltips.push($('<div class="ajaxtooltip"></div>').appendTo('body'))
	
		var $target=$(this)
		$target.removeAttr('title')
		$target.hover(
			function(e){ //onMouseover element
				var $tooltip=tooltips[parseInt(this.titleposition)]
				if (!$tooltip.get(0).loadsuccess){ //first time fetching Ajax content for this tooltip?
					
					$tooltip.html(ajaxtooltip.loadingHTML).show()
					$tooltip.load(this.titleurl, '', function(){
						ajaxtooltip.positiontip($tooltip, e)
						ajaxtooltip.showtip($tooltip, e)
						$tooltip.get(0).loadsuccess=true
					})

				}
				else{
					ajaxtooltip.positiontip($tooltip, e)
					ajaxtooltip.showtip($tooltip, e)
				}
			},
			function(e){ //onMouseout element
				var $tooltip=tooltips[parseInt(this.titleposition)]
				ajaxtooltip.hidetip($tooltip, e)		
			}
		)
		$target.bind("mousemove", function(e){
			var $tooltip=tooltips[parseInt(this.titleposition)]
			ajaxtooltip.positiontip($tooltip, e)
		})
	})
})

 

[ice-breaker]

kannst du mal eine demo hochladen?
ich verstehe das problem nicht wirklich
und da ich kein jquery anhänger bin, fällt es mir auch nicht ganz so leicht alle infos aus dem quelltext herauszulesen

 

[topfkanne]

Ja, kein Problem: https://deralbi.de/demo/

 

[ice-breaker]

nach 3 maligem lesen habe ich es denke ich endlich verstanden

Meine These:
JQuery läd die angegebene Ziel-Url jedoch brauchst du das gar nicht, da er nur einen div anzeigen soll, den du im rel refernziert hast?

Ich bin eben per Google auf ein jquery tooltip plugin gestoßen, was dann genau ist was du möchtest oder ?

 

[topfkanne]

Da muss ich die Links und Tooltips erst im Javascript binden. Mein gepostetes findet automatisch alle Links (mit class="tooltip").

 

[ice-breaker]

das javascript binden kann man ja wrappen indem du etwas schreibst, was die daten aus dem DOM ausliest

 

[tleilax]

Ich persönlich würde auch eher zu dem von ice-breaker geposteten Script raten, bevor Du das andere umbaust. Zum Einen wird es genausogut funktionieren, wenn kein Javascript aktiviert ist (die Tooltips sehen halt "nur" anders aus) und zum Anderen ist das "Problem", das Du damit hast, kein wirkliches:

$(function() {
  $('a.tooltip').tooltip();
});

Wenn Du das einbindest (und natürlich das eigentliche Tooltip-Skript) wird jeder Link mit der Klasse tooltip vertooltipt...

Oder versteh ich grad was falsch?

 

[topfkanne]

Ja, schon, bloß kann ich mit dem jQuery Tooltip Plugin anscheinend keine DIVs referenzieren

 

[tleilax]

Ist es denn zwingend notwendig, dass er die Inhalte aus einem DIV liest oder könntest Du diese nicht auch einfach in das title-Attribut des Links packen?

 

[topfkanne]

Ja, sollte schon so sein.

Sonst hätte ich mich mit einem einfachen Tooltip zufriedengegeben
Das Script oben ist halt auch recht klein... andere Tooltip-Scripte benötigen durch ihren Umfang an Funktionen noch extra Libraries, sind lang usw.

 

[topfkanne]

Hab mir das Script nochmal genauer angesehen und geschaut wie die Variablen übergeben werden – dazu noch ein Nachschlag in den jQuery Docs und tadaaa:

Paar Sachen geändert, gelöscht, hinzugefügt und gekürzt und es funktioniert

var ajaxtooltip={
	fadeeffect: [false], 
	useroffset: [15, 15], 
	positiontip:function($tooltip, e){
		var docwidth=(window.innerWidth)? window.innerWidth-15 : ajaxtooltip.iebody.clientWidth-15
		var docheight=(window.innerHeight)? window.innerHeight-18 : ajaxtooltip.iebody.clientHeight-15
		var twidth=$tooltip.get(0).offsetWidth
		var theight=$tooltip.get(0).offsetHeight
		var tipx=e.pageX+this.useroffset[0]
		var tipy=e.pageY+this.useroffset[1]
		tipx=(e.clientX+twidth>docwidth)? tipx-twidth-(2*this.useroffset[0]) : tipx //account for right edge
		tipy=(e.clientY+theight>docheight)? tipy-theight-(2*this.useroffset[0]) : tipy //account for bottom edge
		$tooltip.css({left: tipx, top: tipy})
	},

	showtip:function($tooltip, e){
		if (this.fadeeffect[0])
			$tooltip.hide().fadeIn(this.fadeeffect[1])
		else
			$tooltip.show()
	},

	hidetip:function($tooltip, e){
		if (this.fadeeffect[0])
			$tooltip.fadeOut(this.fadeeffect[1])
		else
			$tooltip.hide()
	}
}

jQuery(document).ready(function(){
	ajaxtooltip.iebody=(document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
	var tooltips=[] 
	$('.tooltip').each(function(index){

		var div = "#"+this.getAttribute('rel'); 

		this.titleposition=index+' pos'
		tooltips.push($('<div class="ajaxtooltip"></div>').appendTo('body'))
	
		var $target=$(this)
		$target.removeAttr('title')
		$target.hover(
			function(e){ 
				var $tooltip=tooltips[parseInt(this.titleposition)]
				$tooltip.html($(""+div+"").html()).show(); 
			},
			function(e){ 	
				var $tooltip=tooltips[parseInt(this.titleposition)]
				ajaxtooltip.hidetip($tooltip, e)
			}
		)
		$target.bind("mousemove", function(e){
			var $tooltip=tooltips[parseInt(this.titleposition)]
			ajaxtooltip.positiontip($tooltip, e)
		})
	})
})

Danke euch trotzdem für Links & Co