L'attributo titolo appare istantaneamente al passaggio del mouse

Question

Esiste la possibilità di rendere immediatamente un attributo titolo di un tag di ancoraggio al passaggio del mouse non solo dopo pochi secondi. Qualsiasi soluzione in JavaScript/jQuery e CSS è buona.

Answer 1

Il plug-in BootTrap ToolTip fa un ottimo lavoro ed è molto più reattivo/veloce.

Richiede solo l'esecuzione dei file Bootstrap predefiniti.

I CSS possono essere modificati in base alle proprie esigenze.

Maggiori informazioni ed esempi possono essere visualizzati qui:

http://getbootstrap.com/javascript/#tooltips

Answer 2

Non è possibile farlo con le descrizioni dei comandi di default, ma è possibile utilizzare i plugin jQuery per tooltip o bootstrap. e il modo migliore per crearlo è creare un suggerimento personalizzato.

http://tech.pro/tutorial/930/jquery-custom-tooltips

Ecco alcuni riferimenti che è possibile utilizzare

Simpletip: http://craigsworks.com/projects/simpletip/

Bootstrap: http://getbootstrap.com/javascript/#tooltips

Answer 3

Si potrebbe nascondere il tite su mouseover e aggiungere un arco. quindi rimuovere la durata e ripristinare il titolo mouseout

$('a').hover(function(e){ 
    title = $(this).attr('title'); 
    $(this).append('<span>Im Super Fast!!!</span>') 
    $(this).removeAttr('title'); 
}, 
function(e){ 
    $('span', this).remove(); 
    $(this).attr('title',title); 
}); 

Controllare l'esempio - http://jsfiddle.net/1z3catx3/1/

nota: Si avrebbe sicuramente bisogno di stile l'approccio span

Answer 4

One:

// textFrom : String, the attribute from which the text 
 
//   should come, 
 
// delta : String or Number, the distance from the cursor at 
 
//   which the tooltip should appear 
 
function instantTooltips(textFrom, delta) { 
 
    // if delta exists, and can be parsed to a number, we use it, 
 
    // otherwise we use the default of 5: 
 
    delta = parseFloat(delta) ? parseFloat(delta) : 5; 
 

 
    // function to handle repositioning of the created tooltip: 
 
    function reposition(e) { 
 
    // get the tooltip element: 
 
    var tooltip = this.nextSibling; 
 
    // setting the position according to the position of the 
 
    // pointer: 
 
    tooltip.style.top = (e.pageY + delta) + 'px'; 
 
    tooltip.style.left = (e.pageX + delta) + 'px'; 
 
    } 
 

 
    // get all elements that have an attribute from which we 
 
    // want to get the tooltip text from: 
 
    var toTitle = document.querySelectorAll('[' + textFrom + ']'), 
 
    //create a span element: 
 
    span = document.createElement('span'), 
 
    // find if we should use textContent or innerText (IE): 
 
    textProp = 'textContent' in document ? 'textContent' : 'innerText', 
 
    // caching variables for use in the upcoming forEach: 
 
    parent, spanClone; 
 
    // adding a class-name (for CSS styling): 
 
    span.classList.add('createdTooltip'); 
 
    // iterating over each of the elements with a title attribute: 
 
    [].forEach.call(toTitle, function(elem) { 
 
    // reference to the element's parentNode: 
 
    parent = elem.parentNode; 
 
    // cloning the span, to avoid creating multiple elements: 
 
    spanClone = span.cloneNode(); 
 
    // setting the text of the cloned span to the text 
 
    // of the attribute from which the text should be taken: 
 
    spanClone[textProp] = elem.getAttribute(textFrom); 
 

 
    // inserting the created/cloned span into the 
 
    // document, after the element: 
 
    parent.insertBefore(spanClone, elem.nextSibling); 
 

 
    // binding the reposition function to the mousemove 
 
    // event: 
 
    elem.addEventListener('mousemove', reposition); 
 

 
    // we're setting textFrom attribute to an empty string 
 
    // so that the CSS will still apply, but which 
 
    // shouldl still not be shown by the browser: 
 
    elem.setAttribute(textFrom, ''); 
 
    }); 
 
} 
 

 
// calling the function: 
 
instantTooltips('title', 15);

[title] { 
 
    display: block; 
 
    margin: 0 0 1em 0; 
 
} 
 

 
/* 
 
    hiding, and styling, the elements we'll be creating 
 
*/ 
 
[title] + span.createdTooltip { 
 
    display: none; 
 
    border: 2px solid #f90; 
 
    background-color: rgba(255, 255, 255, 0.8); 
 
    padding: 0.2em 0.5em; 
 
    border-radius: 0.75em; 
 
} 
 

 
/* 
 
    showing the created elements on hovering the element we want to 
 
    show tooltips for 
 
*/ 
 
[title]:hover + span.createdTooltip { 
 
    display: block; 
 
    position: absolute; 
 
}

<span title="This is the span's title">A span element</span> 
 
<img src="http://placekitten.com/g/250/250" title="A kitten." /> 
 
<input title="This is an input element's title." value="This input has a title" />

Riferimenti:

• Conditional ('ternary') operator.
• document.createElement().
• document.querySelectorAll().
• Element.classList.
• in operator.
• Node.cloneNode().
• Node.nextSibling.
• Node.parentNode.
• parseFloat().
• typeof.

Answer 5

La gestione dell'attributo title dipende dal browser e non sono state definite API per controllarlo, ancora meno specificato nelle specifiche.Questo comprende il ritardo, la durata del display, il carattere utilizzato, dimensione, ecc

Esistono altre tecniche che possono essere utilizzati al posto di dell'attributo title. Alcuni di essi sono stati citati in altre risposte. Si noti che semplici "tooltips CSS" possono essere implementati in puro CSS in modo semplice e flessibile. Quando si utilizzano queste tecniche, i dati da visualizzare sono in genere non in un attributo title, poiché la sua gestione dipende dal browser, quindi si rischierebbe di visualizzare il suggerimento speciale e l'implementazione di un browser di title. Sebbene sia possibile impedire a quest'ultimo, quando lo scripting è abilitato, è più semplice utilizzare un attributo che non ha alcun effetto predefinito su qualsiasi cosa, come data-title=... o data-tooltip=....

Answer 6

vassoio questo con box-ombra e matrice bordo:

$('a').hover(function(e){ 

    title = $(this).attr('alt'); 
    $(this).append('<span>'+title+'</span>') 


}, 
function(e){ 
    $('span', this).remove(); 


}); 

http://jsfiddle.net/1z3catx3/112/