Foros del Web » Creando para Internet » CSS »

Tooltip transparente en Explorer

Estas en el tema de Tooltip transparente en Explorer en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/04/2007, 06:59
Avatar de peaso  
Fecha de Ingreso: enero-2002
Ubicación: Barcelona
Mensajes: 147
Antigüedad: 15 años, 11 meses
Puntos: 0
Desacuerdo Tooltip transparente en Explorer

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
  #2 (permalink)  
Antiguo 02/04/2007, 09:09
Avatar de Jossephb  
Fecha de Ingreso: marzo-2007
Ubicación: Medellin
Mensajes: 24
Antigüedad: 10 años, 9 meses
Puntos: 0
Re: Tooltip transparente en Explorer

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 ..
  #3 (permalink)  
Antiguo 02/04/2007, 10:04
Avatar de peaso  
Fecha de Ingreso: enero-2002
Ubicación: Barcelona
Mensajes: 147
Antigüedad: 15 años, 11 meses
Puntos: 0
Re: Tooltip transparente en Explorer

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.
  #4 (permalink)  
Antiguo 02/04/2007, 16:42
Avatar de marcosr  
Fecha de Ingreso: agosto-2005
Ubicación: Montevideo, Uruguay
Mensajes: 451
Antigüedad: 12 años, 3 meses
Puntos: 5
Re: Tooltip transparente en Explorer

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.

__________________
Yo hago preguntas inteligentes para obtener respuestas rapidas, y vos?
(únete a la campaña !)
  #5 (permalink)  
Antiguo 03/04/2007, 07:50
Avatar de peaso  
Fecha de Ingreso: enero-2002
Ubicación: Barcelona
Mensajes: 147
Antigüedad: 15 años, 11 meses
Puntos: 0
Re: Tooltip transparente en Explorer

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 ;)

Última edición por peaso; 03/04/2007 a las 08:03
  #6 (permalink)  
Antiguo 03/04/2007, 08:05
Avatar de marcosr  
Fecha de Ingreso: agosto-2005
Ubicación: Montevideo, Uruguay
Mensajes: 451
Antigüedad: 12 años, 3 meses
Puntos: 5
Re: Tooltip transparente en Explorer

Solucionado !

Cita:
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 !
__________________
Yo hago preguntas inteligentes para obtener respuestas rapidas, y vos?
(únete a la campaña !)
  #7 (permalink)  
Antiguo 21/04/2007, 12:53
Avatar de peaso  
Fecha de Ingreso: enero-2002
Ubicación: Barcelona
Mensajes: 147
Antigüedad: 15 años, 11 meses
Puntos: 0
Re: Tooltip transparente en Explorer

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?
  #8 (permalink)  
Antiguo 21/04/2007, 20:56
Avatar de marcosr  
Fecha de Ingreso: agosto-2005
Ubicación: Montevideo, Uruguay
Mensajes: 451
Antigüedad: 12 años, 3 meses
Puntos: 5
Re: Tooltip transparente en Explorer

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 !
__________________
Yo hago preguntas inteligentes para obtener respuestas rapidas, y vos?
(únete a la campaña !)
  #9 (permalink)  
Antiguo 22/04/2007, 13:40
Avatar de peaso  
Fecha de Ingreso: enero-2002
Ubicación: Barcelona
Mensajes: 147
Antigüedad: 15 años, 11 meses
Puntos: 0
Re: Tooltip transparente en Explorer

Reitero las gracias.

Saludos!
  #10 (permalink)  
Antiguo 03/07/2007, 10:20
 
Fecha de Ingreso: enero-2007
Mensajes: 1
Antigüedad: 10 años, 10 meses
Puntos: 0
Re: Tooltip transparente en Explorer

[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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:11.