Come creare un suggerimento con jquery senza un plugin?

Ho usato diversi plug-in di tooltip nel corso degli anni, ma penso che sia diventato il momento di scrivere il mio. Semplicemente, non sono alla ricerca di un plug-in che abbia tutte le opzioni, perché so come voglio che ogni suggerimento che si apre appaia e si comporti. Molti plugin hanno una gamma di animazioni e posizioni disponibili e penso che sia eccessivo per il leggero che voglio creare, con il tuo aiuto ovviamente :)Come creare un suggerimento con jquery senza un plugin?

Fondamentalmente, usando l'attributo title del hover, voglio un tooltip per apparire direttamente sopra e centrato sull'elemento che si libra.

So come popolare il div che verrà mostrato, ma quello che sto cercando di capire è come dire a quel div di posizionarsi direttamente sopra l'elemento.

idealmente questo viene fatto con codice minimo. La mia logica dice qualcosa di simile (pseudo codice):

<html> 
<head> 

<style type="text/css"> 

    #myToolTip { display: none; } 

</style>

<script type="text/javascript"> 

$(document).ready(function() { 

    $('.hoverAble').hover(function(){ 

     var tip = $(this).attr('title'); 

     $('#myToolTip').html(tip).fadeIn(); 

    }, function() { 

     $('#myToolTip').fadeOut(); 

    } 

}); 
</script> 
</head> 
<body> 

<div id="myToolTip"></div> 

<div class="hoverAble" title="I am good at code"></div> 

</body> 
</html>

, naturalmente, il codice di cui sopra è solo andare a riempire il tooltip e non essere posizionato rispetto all'elemento è passato il mouse. Ecco dove la mia comprensione non è all'altezza. Puoi aiutare?

Modifica: Solo per chiarimenti, non voglio che il tooltip si sposti con il mouse.

fonte

2009-08-10 willdanceforfun

nel codice c'è bug pronto (function() {}); manca la parentesi! –

tx per quel cliente! – willdanceforfun

Date un'occhiata alle varie CSS functions in jQuery, per lo più offset() e forse height() .

// pseudocode, assuming #tooltip has position: absolute 
// do something similar with the left offset as well 
$('#tooltip').css({ top : $('#link').offset().top + 10 + 'px' });

Questo sarebbe posizionare il tooltip staticamente sopra, o vicino al, il collegamento, che credo sia quello che stai cercando. Se vuoi che il tooltip si sposti con il mouse, dovrai aggiornare dinamicamente la posizione in un evento mousemove.

fonte

2009-08-10 12:41:07 deceze

penso che sia così. sembra ovvio ora di guardare le funzioni CSS lì! – willdanceforfun

La parte superiore sembra funzionare correttamente, ma il mio attributo 'left' non sembra fare nulla: $ ('# tooltip'). Css ({top: $ (this) .offset(). Top - 50 + 'px ', a sinistra: $ (questo) .offset()}); -- qualche idea? – willdanceforfun

'offset()' restituisce un oggetto con attributi "top" e "left", quindi devi usare 'offset(). Left'. Hai anche allegato "px"? – deceze

Senza esempi di codice specifici, è possibile esaminare il contenuto dell'oggetto evento (suppongo che si stia facendo questo sull'evento onmouseover).

Le proprietà clientX e clientY di questo dovrebbe aiutare

controllare il seguente per l'oggetto evento:

http://www.javascriptkit.com/jsref/event.shtml

fonte

2009-08-10 12:40:01

Penso che questo possa aiutarti.

<html> 
<head> 
<style type="text/css"> 
    #myToolTip { display: none;position:absolute; } 
</style> 
<script type="text/javascript" src='js/jquery.js'></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 

    $('.hoverAble').hover(function(e){ 
     var left = mouseX(e); 
     var top = mouseY(e); 
     var tip = $(this).attr('title'); 

     $('#myToolTip').css('top',top); 
     $('#myToolTip').css('left',left); 
     $('#myToolTip').html(tip).fadeIn(); 


    }, function() { 

     $('#myToolTip').fadeOut(); 

    }) 

});

posizioni del mouse:

function mouseX(evt) { 
if (evt.pageX) return evt.pageX; 
else if (evt.clientX) 
    return evt.clientX + (document.documentElement.scrollLeft ? 
    document.documentElement.scrollLeft : 
    document.body.scrollLeft); 
else return null; 
} 

function mouseY(evt) { 
if (evt.pageY) return evt.pageY; 
else if (evt.clientY) 
    return evt.clientY + (document.documentElement.scrollTop ? 
    document.documentElement.scrollTop : 
    document.body.scrollTop); 
else return null; 
} 
</script> 
</head>

html:

<body> 

<div id="myToolTip"></div> 

<div class="hoverAble" title="I am good at code">hi catch me</div> 

</body> 
</html>

fonte

2009-08-10 12:52:12

scusa avrei dovuto essere più specifico. Non voglio che la punta si muova con il mouse ... solo un po 'sopra l'elemento corrente. – willdanceforfun

<div title="This is tooltip">Hover Me</div>

Questo semplice suggerimento sta lavorando per me. Puoi aggiungere qualsiasi classe per renderla elegante.

fonte

2009-08-10 13:18:45 NAVEED

Uno dei più facili da usare il tooltip jQuery.UI integrato.

$(document).tooltip();

E in html tutti i tag "title" rivolgersi a tooltip ...

<div class="juppiduppi" title="Here is a tooltip, just for you. ">Over here with the mouse... </div>

fonte

2013-10-06 21:43:34 huncyrus

Come creare un suggerimento con jquery senza un plugin?

risposta

Problemi correlati