Tooltip zone!

[andbaz]

Ciao a tutti, sto cercando sul web un bel script per il mio sistema di tooltip per il mio sito. Ho visto che ce ne sono una marea, però io cerco un tooltip che sia personalizzabile al 100%, cioè che sia possibile inserirci all'interno div su div con di tutto e di più all'interno, quindi chiedo qui al forum se degli utenti ne conoscono di simili o anche di carini di postarli oppure di scrivermi qui il link, grazie!

[techno]

prova col jquery e semplicissimo, almeno per me

[andbaz]

Semplicissimo? Oddio, io jquery non so niente, da dove potrei iniziare secondo te per raggiungere l'obbiettivo di saper creare un tooltip complesso? Necessito di dritte!
Io per esempio mi sono trovato questo script come tooltip: però non so come personalizzarlo aggiungendo div su div come dicevo prima...

var oTooltip = new (function() {
	var nOverX, nOverY, nLeftPos, nTopPos, oNode, bOff = true;
	this.follow = function (oMsEvnt1) {
		if (bOff) { return; }
		if (!oMsEvnt1) {  oMsEvnt1 = window.event; }
		var nMoveX =  oMsEvnt1.clientX, nMoveY =  oMsEvnt1.clientY;
		nLeftPos += nMoveX - nOverX; nTopPos += nMoveY - nOverY;
		oNode.style.left = nLeftPos + "px";
		oNode.style.top = nTopPos + "px";
		nOverX = nMoveX; nOverY = nMoveY;
	};
	this.remove = function () {
		if (bOff) { return; }
		bOff = true; document.body.removeChild(oNode);
	};
	this.append = function (oMsEvnt2, sTxtContent) {
		if (!oMsEvnt2) { oMsEvnt2 = window.event; }
		oNode.innerHTML = sTxtContent;
		if (bOff) { document.body.appendChild(oNode); bOff = false; }
		var nScrollX = document.documentElement.scrollLeft || document.body.scrollLeft, nScrollY = document.documentElement.scrollTop || document.body.scrollTop, nWidth = oNode.offsetWidth, nHeight = oNode.offsetHeight;
		nOverX = oMsEvnt2.clientX; nOverY = oMsEvnt2.clientY;
		nLeftPos = document.body.offsetWidth - nOverX - nScrollX > nWidth ? nOverX + nScrollX + 10 : document.body.offsetWidth - nWidth + 16;
		nTopPos = nOverY - nHeight > 6 ? nOverY + nScrollY - nHeight - 7 : nOverY + nScrollY + 20;
		oNode.style.left = nLeftPos + "px";
		oNode.style.top = nTopPos + "px";
	};
	this.init = function() {
		oNode = document.createElement("div");
		oNode.setAttribute("class", "tooltip");
		oNode.style.position = "absolute";
	};
})();

...
.tooltip {
width: auto;
height: auto;
color: #ffffff;
background: #000000;
}
...
<input type='submit'
    onmouseover="oTooltip.append(event, 'TESTO DI PROVA!')"
    onmouseout="oTooltip.remove();"
    onmousemove="oTooltip.follow(event);"> 

[andbaz]

SUPER UP (spero non faccia male a nessuno! )

Poi cedo di avere capito come funziona: alla fine del codice mi sembra sia presente una funzione, e da questo ho capito che viene creato un div collegato ad una classe, ecco come faccio a creare un div con all'interno altri div collegati ad un id ogniuno? Direi che sarebbe proprio quello che vorrei riuscire a fare! Ho navigato un po ma non funzionano i miei tentativi, perciò: AIUTO!

[cavicchiandrea]

Andare per tentativi affidandosi alla fortuna difficilmente porta risultati, l'unica cosa da fare è studiare bene il funzionamento http://javascript.html.it/guide/leggi/24/guida-dom/ chiaramente è solo un consiglio che puoi benissimo ignorare.

[andbaz]

Grazie per il consiglio, ho letto tutta la guida, ho provato a fare così ora, ma il div che all'interno del div principale vorrei mettere non lo prende in considerazione (mi riferisco all'innerHTML verso la fine dello script)

var oTooltip = new (function() {
	var nOverX, nOverY, nLeftPos, nTopPos, div, bOff = true;
	this.follow = function (oMsEvnt1) {
		if (bOff) { return; }
		if (!oMsEvnt1) {  oMsEvnt1 = window.event; }
		var nMoveX =  oMsEvnt1.clientX, nMoveY =  oMsEvnt1.clientY;
		nLeftPos += nMoveX - nOverX; nTopPos += nMoveY - nOverY;
		div.style.left = nLeftPos + "px";
		div.style.top = nTopPos + "px";
		nOverX = nMoveX; nOverY = nMoveY;
	};
	this.remove = function () {
		if (bOff) { return; }
		bOff = true; document.body.removeChild(div);
	};
	this.append = function (oMsEvnt2, sTxtContent) {
		if (!oMsEvnt2) { oMsEvnt2 = window.event; }
		div.innerHTML = sTxtContent;
		if (bOff) { document.body.appendChild(div); bOff = false; }
		var nScrollX = document.documentElement.scrollLeft || document.body.scrollLeft, nScrollY = document.documentElement.scrollTop || document.body.scrollTop, nWidth = div.offsetWidth, nHeight = div.offsetHeight;
		nOverX = oMsEvnt2.clientX; nOverY = oMsEvnt2.clientY;
		nLeftPos = document.body.offsetWidth - nOverX - nScrollX > nWidth ? nOverX + nScrollX + 10 : document.body.offsetWidth - nWidth + 16;
		nTopPos = nOverY - nHeight > 6 ? nOverY + nScrollY - nHeight - 7 : nOverY + nScrollY + 20;
		div.style.left = nLeftPos + "px";
		div.style.top = nTopPos + "px";
	};
	this.init = function() {
		div = document.createElement('div');
		div.style.position = "absolute";
		div.innerHTML = "<div style='position: absolute; width: 50; height: 20; background: #ff0000'></div>";
	};
})();

[cavicchiandrea]

A) Dici ho letto tutta la guida poi usi innerHTML boh.... faccio fatica a crederti essendo un controsenso.
B) Forse è il caso che tu faccia anche un ripasso di css div.innerHTML = "<div style='position: absolute; width: 50px; height: 20px; background-color: #ff0000'></div>";

[andbaz]

E cosa dovrei usare? Cmq px o non px fungerebbe lo stesso, stessa cosa per la tag background

[cavicchiandrea]

Originariamente inviato da andbaz
E cosa dovrei usare?

La guida lo spiega

Cmq px o non px fungerebbe lo stesso, stessa cosa per la tag background

Sono errori che potevano o non potevano risolvere il problema.

[andbaz]

Ok, credo di aver capito come il sistema funzioni, ho fatto così:
Però il problema ora qual'è? Non riesco ad immettere del codice php all'interno dell'innerHTML, soluzioni? Per il resto è ok, grazie per il consiglio della guida, mi è stata utile! Ed ora...aiuto!

var tip = new (function() {
	var overX, overY, leftPos, topPos, div, OFF = true;	
	this.follow = function (mouse1) {	
		if (OFF) { return; }		
		if (!mouse1) { mouse1 = window.event; }		
		var moveX =  mouse1.clientX, moveY =  mouse1.clientY;		
		leftPos += moveX - overX; topPos += moveY - overY;
		div.style.left = leftPos + "px";
		div.style.top = topPos + "px";		
		overX = moveX; overY = moveY;
	};	
	this.remove = function () {
		if (OFF) { return; }
		OFF = true; document.body.removeChild(div);
	};
	this.append = function (mouse2) {
		if (!mouse2) { mouse2 = window.event; }
	        div.innerHTML = "<div id='div38'><table><tr><td>[img]icon6.png[/img]</td><td><?php echo $piu; ?></td></tr><tr><td>[img]icon2.png[/img]</td><td><?php echo $com; ?></td></tr></table></div>"; 
		if (OFF) { document.body.appendChild(div); OFF = false; }
		var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft, scrollY = document.documentElement.scrollTop || document.body.scrollTop, nWidth = div.offsetWidth, nHeight = div.offsetHeight;
		overX = mouse2.clientX; overY = mouse2.clientY;
		leftPos = document.body.offsetWidth - overX - scrollX > nWidth ? overX + scrollX + 10 : document.body.offsetWidth - nWidth + 16;
		topPos = overY - nHeight > 6 ? overY + scrollY - nHeight - 7 : overY + scrollY + 20;
		div.style.left = leftPos + "px";
		div.style.top = topPos + "px";		
	};
	this.init = function() {
		div = document.createElement('div');
		div.setAttribute('id','tip');
		};
})();