Dois menus tooltip com Js e CSS.

[petter 0]

Pessoal tenho um código que cria um tooltip para link via js e dá estilo via CSS. O problema é que tenho dois menus no site e gostaria que cada menu apresentasse um tooltip diferente, mas ou exibe um ou exibe o outro tooltip. Olha o meu JS:

//Função para menu lateralvar qTipTag = "b"; //Which tag do you want to qTip-ize? Keep it lowercase!//var qTipX = 30; //This is qTip's X offset//var qTipY = 0; //This is qTip's Y offset////There's No need to edit anything below this line//tooltip = {  name : "qTip_lat",  offsetX : qTipX,  offsetY : qTipY,  tip : null}tooltip.init = function () {	var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";	if(!tipContainerID){ var tipContainerID = "qTip_lat";}	var tipContainer = document.getElementById(tipContainerID);	if(!tipContainer) {	  tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div_lat") : document.createElement("div_lat");		tipContainer.setAttribute("id", tipContainerID);	  document.getElementsByTagName("body").item(0).appendChild(tipContainer);	}	if (!document.getElementById) return;	this.tip = document.getElementById (this.name);	if (this.tip) document.onmousemove = function (evt) {tooltip.move (evt)};	var b, sTitle;	var anchors = document.getElementsByTagName (qTipTag);	for (var i = 0; i < anchors.length; i ++) {		b = anchors[i];		sTitle = b.getAttribute("title_lat");		if(sTitle) {			b.setAttribute("tiptitle", sTitle);			b.removeAttribute("title");			b.onmouseover = function() {tooltip.show(this.getAttribute('tiptitle'))};			b.onmouseout = function() {tooltip.hide()};		}	}}tooltip.move = function (evt) {	var x=0, y=0;	if (document.all) {//IE		x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;		y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;		x += window.event.clientX;		y += window.event.clientY;			} else {//Good Browsers		x = evt.pageX;		y = evt.pageY;	}	this.tip.style.left = (x + this.offsetX) + "px";	this.tip.style.top = (y + this.offsetY) + "px";}tooltip.show = function (text) {	if (!this.tip) return;	this.tip.innerHTML = text;	this.tip.style.display = "block";}tooltip.hide = function () {	if (!this.tip) return;	this.tip.innerHTML = "";	this.tip.style.display = "none";}window.onload = function () {	tooltip.init ();}//Função para menu de topovar qTipTag_topo = "a"; //Which tag do you want to qTip-ize? Keep it lowercase!//var qTipX_topo = 10; //This is qTip's X offset//var qTipY_topo = 15; //This is qTip's Y offset////There's No need to edit anything below this line//tooltip_topo = {  name : "qTip_topo",  offsetX : qTipX_topo,  offsetY : qTipY_topo,  tip : null}tooltip_topo.init = function () {	var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";	if(!tipContainerID){ var tipContainerID = "qTip_topo";}	var tipContainer = document.getElementById(tipContainerID);	if(!tipContainer) {	  tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");		tipContainer.setAttribute("id", tipContainerID);	  document.getElementsByTagName("body").item(0).appendChild(tipContainer);	}	if (!document.getElementById) return;	this.tip = document.getElementById (this.name);	if (this.tip) document.onmousemove = function (evt) {tooltip_topo.move (evt)};	var a, sTitle;	var anchors = document.getElementsByTagName (qTipTag_topo);	for (var i = 0; i < anchors.length; i ++) {		a = anchors[i];		sTitle = a.getAttribute("title_topo");		if(sTitle) {			a.setAttribute("tiptitle", sTitle);			a.removeAttribute("title");			a.onmouseover = function() {tooltip_topo.show(this.getAttribute('tiptitle'))};			a.onmouseout = function() {tooltip_topo.hide()};		}	}}tooltip_topo.move = function (evt) {	var x=0, y=0;	if (document.all) {//IE		x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;		y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;		x += window.event.clientX;		y += window.event.clientY;			} else {//Good Browsers		x = evt.pageX;		y = evt.pageY;	}	this.tip.style.left = (x + this.offsetX) + "px";	this.tip.style.top = (y + this.offsetY) + "px";}tooltip_topo.show = function (text) {	if (!this.tip) return;	this.tip.innerHTML = text;	this.tip.style.display = "block";}tooltip_topo.hide = function () {	if (!this.tip) return;	this.tip.innerHTML = "";	this.tip.style.display = "none";}window.onload = function () {	tooltip_topo.init ();}

Meu CSS:

div_lat#qTip_lat{   padding: 2px;   text-align:center;   width:120px;   border: 1px solid #EAA413;   display: none;   background: #F7E18C;   color: #000000;   font: normal 9px Verdana, Arial, Helvetica, sans-serif;   position: absolute;   z-index: 1000;}div#qTip_topo {   padding: 2px;   text-align:center;   width:150px;   border: 1px solid #FF5959;   display: none;   background: #FFACAC;   color: #000000;   font: normal 9px Verdana, Arial, Helvetica, sans-serif;   position: absolute;   z-index: 1000;}

[petter 0]

Eu já tinha testado esse exemplo (aliás o site desse cara é show), porém esse menu fica com uma "margem" do lado esquerdo, como estou estudando o CSS mexi de várias formas mas não consegui remover essa "margem" e deixar o menu "grudado" no lado esquerdo.Se você puder dar uma dica para me ajudar eu agradeço.Valeu.

[petter 0]

Valeu.

Tive a iluminação de colocar o seguinte no meu código do ul:

padding:0px;	margin:0px;

No famigerado IE funciona e no Firefox não. Alguém tem alguma dica?

[Guilherme Rambo 4]

mas usou que seletor?

* {margin:0;padding:0;}

isso funfa em todos os browsers ;)

[petter 0]

Pessoal fiz uma pequena alteração no CSS e usando margin e padding funcionou.

Valeu pela força.

 

Só mais uma dúvida, esse menu é na vertical e agora funciona beleza, contudo preciso fazer um menu igual a este só que na horizontal, coloquei o seguinte CSS no código original, para testar coloquei no div, ul e até no li:

display:inline;

Porém no IE funfa e no FF não, tenho que fazer mais alguma coisa?