Su un sito in costruzione sto usando Tooltipster per gestire la grafica dei tooltip, ma ho un problema.
Ho una pagina su cui è presente un'immagine e passandoci sopra appare correttamente il tooltip con la grafica voluta.
Questa immagine è cliccabile ed al click attiva una chiamata AJAX, la funzione lato server, dopo aver eseguito le operazioni, risponde con del codice HTML che genera una nuova immagine che va a sostituire quella su cui si è cliccato.
La nuova immagine non viene gestita da Tooltipster perché ovviamente al momento del caricamento della pagina e quando Tooltipster viene inizializzato, quell'immagine non c'era.
C'è un modo per riinizializzare Tooltipster dopo la chiamata AJAX?
Questa è l'immagine prima del click, quella che funziona
codice:
<div class="link-segui">
<div class="pull-right">
<a class="mod-tooltip" onclick="follow(2)" href="#">
<img class="follow-icon"
onmouseout="this.src = 'http://localhost/assets/images/iconset/follow_grey.png'"
onmouseover="this.src = 'http://localhost/assets/images/iconset/follow_blu.png'"
alt="follow" src="http://localhost/assets/images/iconset/follow_grey.png">
</a>
</div>
</div>
L'immagine di rimpiazzo ha questo codice
codice:
<div class="pull-right">
<a class="mod-tooltip" onclick="unfollow(2)" href="#">
<img class="follow-icon"
onmouseout="this.src = 'http://localhost/assets/images/iconset/dont_follow_grey.png'"
onmouseover="this.src = 'http://localhost/assets/images/iconset/dont_follow_red.png'"
alt="follow" src="http://localhost/assets/images/iconset/dont_follow_grey.png">
</a>
</div>
Qui non c'è il div più esterno perché quello resta, in quanto il codice per rimpiazzare l'immagine è
codice:
...
$.ajax({
url: follow_url,
type: 'POST',
data: form_data,
success: function(msg) {
$('div.link-segui').html(msg);
}
});
Tooltipster è associato alla classe mod-tooltip