Evitar que el atributo "título" del elemento principal cause un sobrevuelo del explorador

Question

Los buenos navegadores funcionan de forma tal que un atributo de "título" vacío para un elemento significa, "no se moleste en mostrar un título aquí". Eso tiene sentido, ya que un pequeño paso elevado blanco sin nada (edit — o nada más que un personaje espacial) es, para la mayoría de las personas, completamente inútil.

Los diseñadores de IE no están de acuerdo.

Mi problema es que tengo un poco de "¿Qué es esto?" mecanismo en un sitio que implica un <div> absolutamente posicionado que contiene un pequeño gráfico de un signo de interrogación. Ese <div> tiene un atributo de "título" con una pregunta como, "¿Qué hace el 'Botón Borrador de Historia'?" Cuando haces clic en el signo de interrogación, aparece una pequeña burbuja de "Ayuda" y puedes leer sobre el tema. La idea del "título" es que si el usuario pasa el mouse sobre el signo de interrogación, verá una pregunta que (con suerte) podría estar preguntando.

Bueno, el problema con el "título" es que el globo de "ayuda" emergente está dentro del <div> absolutamente posicionado para que esté correctamente situado en la página. En otras palabras, el <div> absolutamente posicionado solo tiene "posición: absoluta", pero se puede dejar caer en la página en el lugar "correcto" sin ningún cálculo de compensación. El globo de "ayuda" se encuentra en el lugar correcto de forma automática. Pero: ese "título" en el padre <div> es molesto porque el navegador lo abre después de el globo está abierto. ¿Por qué? porque el globo de "ayuda" está contenido léxicamente en el exterior <div>, aunque el <div> externo es solo una cosa pequeña con un signo de interrogación.

Por lo tanto la solución # 1 fue dar la "ayuda" globo <div> su propia atributo "title", sin nada en él (edición — Tengo que mal, no es nada en el título, es un personaje de espacio). Eso funciona muy bien, excepto en IE. En IE ahora, ese atributo "title" vacío hace que el navegador ponga un pequeño rectángulo en blanco. Servicial.

Podría, por supuesto, jugar con el Javascript y simplemente desconectar el atributo "title" del padre <div> mientras se muestra el globo, pero tengo curiosidad sobre posibles formas de "reemplazar" el elemento principal "title" en IE eso se puede hacer con nada más que marcado. Si no es posible, entonces bueno.

simple página de demostración: http://gutfullofbeer.net/title.html (probarlo con IE 7 o 8 para ver la pequeña caja blanca vacía)

edición — ja ja ja - cuando cambio mi código para que explícitamente nula a cabo el " título "atributos en todos los elementos principales, IE muestra un paso elevado con la palabra" nulo "en él :-)

Answer 1

terminé aumentar mi código existente que se abre/cierra la burbuja de "ayuda" para que se ejecute en la cadena de elementos primarios y stashes el código "título" con el recurso "datos" de jQuery. Cuando la burbuja se cierra, los títulos se restauran.

Answer 2

No creo que pueda hacer lo que quiera. En cualquier caso, parece un hack: los atributos secundarios de los elementos DOM no están destinados a "anular" los atributos principales. Probablemente debería ajustar el texto específico con el título correcto, como este:

http://jsbin.com/ezipe

Answer 3

Por qué no asignar el título al elemento de signo de interrogación (#qmark) en lugar del div que contiene? Así que en lugar de:

<div title="this is the overlapping title"> 
    <div id="qmark">?</div> 
    <div id="hiddenContainer"></div> 
</div> 

sería

<div> 
    <div id="qmark" title="this title no longer overlaps">?</div> 
    <div id="hiddenContainer"></div> 
</div>