Anteprima delle immagini in un tooltip con jquery

Per creare anteprime di immagini in un tooltip con jQuery, puoi utilizzare un semplice script che carica l'immagine quando il mouse si posiziona su un elemento specifico.
Ecco un esempio di come farlo:

1. HTML:

<a class="preview" href="image.jpg">
<img alt="Gallery thumbnail" src="thumbnail.jpg"/>
</a>

2. CSS:

.preview img { width: 100px; /* Dimensione della miniatura */
height: auto;
display: block; }

3. jQuery:

$(document).ready(function() {
$('.preview').hover(function() {
var $this = $(this);
var image = $this.attr('href');
$('<div class="tooltip"></div>').appendTo('body').show().html(' <img src="' + image + '" /> '); }, function() {
$('.tooltip').remove();
});
});

In questo esempio, quando il mouse si posiziona sull'elemento con la classe preview, viene creata una div contenente l'immagine completa e viene visualizzata come tooltip. Quando il mouse si allontana, la tooltip viene rimossa.

Fai la tua richiesta

A Vostra disposizione per consigli e informazioni

Contattaci