Meine Datei sieht aktuell so aus:
HTML:
<?php
defined('_JEXEC') or die('Restricted access');
?>
<head>
<link rel="stylesheet" type="text/css" href="css/tooltipster.bundle.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/tooltipster.bundle.min.js"></script>
</head>
<img src="tmp/10000.jpg" class="tooltipster">
<script>
$('.tooltipster').tooltipster({
// Tooltipster anweisen, den Inhalt des Tooltipps als HTML zu interpretieren:
contentAsHTML: true,
// Gleich bei der Initialisierung setzen wir den Inhalt für jeden Tooltipp:
functionInit: function (instance, helper) {
// Diese Funktion wird für jedes Element mit der Klasse "tooltipster"
// aufgerufen, d. h. Tooltipster erledigt die Schleife intern.
const
// Die URL des großen Bildes bekommen wir, indem wir in der URL
// des kleinen Bildes das Verzeichnis austauschen:
imgUrl = helper.origin.src.replace('tmp', 'img');
// Jetzt können wir den Inhalt des Tooltipps als HTML
// mit einem img-Tag festlegen:
$(helper.origin).tooltipster('content', $(`<img src="${imgUrl}">`));
}
});
</script>
Zuletzt bearbeitet:
