Tooltip transparente en Explorer

[peaso]

Saludos!

Tras pasar una web a XHTML+CSS, he hecho unos tooltips con spans ocultos que al pasar la rata por encima aparezcan.

Pues bien, en Firefox funciona perfectamente, pero en Explorer da la sensación de ser transparentes.

Ejemplo:
http://devel.htstats.com/peaso

Basta con que paséis la rata por encima de (casi) cualquier
dato de la tabla principal.

¿Alguna idea? Si necesitáis más datos sobre el CSS que uso, me lo decís.

¡Gracias!
Peaso

[Jossephb]

Pues no se como lo estes usando pero si la imagen es png con transparencia puedes utilizar este javascript que te da esa solución para IE:

png.js

Código:

// JavaScript Document
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
	window.attachEvent("onload", fnLoadPngs);
}

function fnLoadPngs() {
	var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
	var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
	for (var i = document.all.length - 1, obj = null; (obj = document.all[i]); i--) {
		if (itsAllGood && obj.currentStyle.backgroundImage.match(/\.png/i) != null) {
			this.fnFixPng(obj);
			obj.attachEvent("onpropertychange", this.fnPropertyChanged);
		}
	}
}
	
function fnPropertyChanged() {
	if (window.event.propertyName == "style.backgroundImage") {
		var el = window.event.srcElement;
		if (!el.currentStyle.backgroundImage.match(/x\.gif/i)) {
			var bg	= el.currentStyle.backgroundImage;
			var src = bg.substring(5,bg.length-2);
			el.filters.item(0).src = src;
			el.style.backgroundImage = "url(x.gif)";
		}
	}
}
	
function fnFixPng(obj) {
	var bg	= obj.currentStyle.backgroundImage;
	var src = bg.substring(5,bg.length-2);
	obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
	obj.style.backgroundImage = "url(x.gif)";
}

y en cada página HTML pones lo siguiente:

Código HTML:

<script type="text/javascript" src="png.js"></script> 

espero te sirva ..

[peaso]

Gracias por la respuesta pero no, no utilizo imágenes. El texto que se muestra tiene acompañado un span oculto. Al pasar la rata por el texto, el span se muestra y es entonces donde, con Explorer, se vuelve transparente mostrando el texto que hay detrás:

Código:

<a class="tooltip" href="#">27<span>27: <strong>bueno (alto)</strong>

  </span>
</a>

La clase tooltip la utilizo para cambiarle el cursor y como marca para que el span de dentro esté oculto. Después, lo muestro con el hover.

[marcosr]

A la capa que aparece agrégale lo siguiente: z-index:2

Si continúa prueba con 999, el tema es que cuanto más alto el número más arriba aparece y tapa a los de abajo. Si no funciona vuelve para tratar otras soluciones.

[peaso]

Nada, sigue igual.

Pero ahora me he dado cuenta de que hay un tooltip que sí funciona bien. Si miráis la web de ejemplo con Explorer (http://devel.htstats.com/peaso), al pasar la rata en la tabla por encima de "Pepitilla", el tooltip sí se queda sobre el resto. Pero en cambio, si lo hacéis con la cabecera de la tabla, no.

Y lo peor es que ambos tooltips son casi idénticos:

Funciona OK:

Código:

<a class="tooltip_enlace" href="url_enlace">Pepitilla F.C.<span>
[...]aqui el html del tooltip[...] </span></a>

Funciona MAL:

Código:

<a class="tooltip_enlace" href="otra URL">MC<span>[...]aqui otro html del tooltip[...]</span></a>

Seguiré investigando... gracias por la ayuda!

Edito: por cierto, tanto el XHTML como el CSS valida perfectamente en w3c ;)

[marcosr]

Solucionado !

a:hover.tooltip,
a:hover.tooltip_enlace {
background: none;
z-index:2;
}

Busca las líneas debajo de "/* Esto no sé pa qué es */" y cambia por lo que puse arriba hasta "/* El span que está dentro del a.tooltip, oculto */".

Saludos !

[peaso]

No me había llegado el aviso de respuesta a mi correo y he visto este mensaje ahora (2 semanas después :S).

Voy a probar ;)


Edito: ooooooohhhhh!!!!
Funciona!!! (por supuesto ;))
Muchísimas gracias, Marcos. Te debo una!

Una duda sobre el error. Por defecto, ¿qué indice tienen los elementos?

[marcosr]

No se si se le asigna 0 por defecto o si simplemente no se asigna nada ya que cuando se agrega una capa nueva estás van tapando a las viejas a menos que se le indique como z-index -1 y así queda debajo.

Un abrazo !

[peaso]

Reitero las gracias.

Saludos!

[inferno web]

[QUOTE=Jossephb;1952949]Pues no se como lo estes usando pero si la imagen es png con transparencia puedes utilizar este javascript que te da esa solución para IE:

png.js

Código:

// JavaScript Document
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
	window.attachEvent("onload", fnLoadPngs);
}

function fnLoadPngs() {
	var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
	var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
	for (var i = document.all.length - 1, obj = null; (obj = document.all[i]); i--) {
		if (itsAllGood && obj.currentStyle.backgroundImage.match(/\.png/i) != null) {
			this.fnFixPng(obj);
			obj.attachEvent("onpropertychange", this.fnPropertyChanged);
		}
	}
}
	
function fnPropertyChanged() {
	if (window.event.propertyName == "style.backgroundImage") {
		var el = window.event.srcElement;
		if (!el.currentStyle.backgroundImage.match(/x\.gif/i)) {
			var bg	= el.currentStyle.backgroundImage;
			var src = bg.substring(5,bg.length-2);
			el.filters.item(0).src = src;
			el.style.backgroundImage = "url(x.gif)";
		}
	}
}
	
function fnFixPng(obj) {
	var bg	= obj.currentStyle.backgroundImage;
	var src = bg.substring(5,bg.length-2);
	obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
	obj.style.backgroundImage = "url(x.gif)";
}

y en cada página HTML pones lo siguiente:

Código HTML:

<script type="text/javascript" src="png.js"></script> 

amigo pero este codigo no me sirve utilizando ajax