Prevenire l'attributo "titolo" dell'elemento padre causando un cavalcavia del browser

Question

I buoni browser funzionano tutti in modo tale che un attributo "titolo" vuoto per un elemento significhi "non preoccuparsi di mostrare un cavalcavia del titolo qui". Questo ha senso, come un piccolo cavalcavia bianco senza niente (modifica — o nient'altro che un personaggio spaziale) è, per la maggior parte delle persone, completamente inutile.

I progettisti di IE non sono d'accordo.

Il mio problema è che ho un po '"cos'è questo?" meccanismo su un sito che include un <div> in posizione assoluta contenente un piccolo grafico di un punto interrogativo. Che <div> ha un attributo "titolo" con una domanda del tipo "Che cosa fa il 'pulsante di cancellazione della cronologia'?" Quando fai clic sul punto interrogativo, appare un piccolo fumetto "Aiuto" e puoi leggere l'argomento. L'idea del "titolo" è che se l'utente passa sopra il punto interrogativo, vede una domanda che è (si spera) quella di cui si staranno chiedendo.

Bene, il problema con il "titolo" è che il fumetto di "aiuto" del pop-out si trova all'interno del numero <div> in posizione assoluta in modo che sia posizionato correttamente nella pagina. In altre parole, lo <div> in posizione assoluta ha solo "position: absolute", ma può essere lasciato cadere nella pagina nella posizione "right" senza calcoli di offset. Il fumetto "aiuto" è quindi nel posto giusto in ordine automatico. Ma: quel "titolo" sul genitore <div> è fastidioso perché il browser lo visualizza su dopo il il fumetto è aperto. Perché? perché il fumetto "aiuto" è contenuto lessicamente nell'esterno <div>, anche se l'esterno <div> è solo una piccola cosa con un punto interrogativo.

Così soluzione # 1 è stato quello di dare il pallone "help" <div> sua proprio attributo "title", con niente in esso (modifica — ho ottenuto che sbagliato, non è nulla nel titolo, è un personaggio spaziale). Funziona benissimo, tranne in IE. In IE ora, quell'attributo "titolo" vuoto fa sì che il browser metta un piccolo rettangolo vuoto. Utile.

Ovviamente potrei armeggiare con il javascript e applicare semplicemente l'attributo "titolo" al genitore <div> mentre il fumetto sta mostrando, ma sono curioso di possibili modi per "sovrascrivere" l'elemento genitore "titolo" in IE ciò può essere fatto con nient'altro che markup. Se non è possibile, allora vabbè.

pagina di configurazione semplice: http://gutfullofbeer.net/title.html (provare con IE 7 o 8 per vedere la piccola scatola bianca vuota)

modificare — ah ah ah - quando cambio il mio codice in modo che io esplicitamente nulla la " titolo "attributi su tutti gli elementi parent, IE mostra un cavalcavia con la parola" null "in esso :-)

Answer 1

ho finito per aumentare il mio codice esistente che si apre/chiude la bolla "help" in modo che venga eseguito a monte della catena di elementi padre e stashes il codice "titolo" con la funzione "dati" di jQuery. Quando la bolla si chiude, i titoli vengono ripristinati.

Answer 2

Non penso che tu possa fare quello che vuoi. Sembra comunque un hack: gli attributi dell'elemento DOM figlio non intendono "sovrascrivere" gli attributi padre. Probabilmente si dovrebbe avvolgere il testo specifico con il titolo corretto, come ad esempio questo:

http://jsbin.com/ezipe

Answer 3

Perché non assegnare il titolo per l'elemento punto di domanda (#qmark) al posto del div che contiene? Così, invece di:

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

sarebbe

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