• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tooltip ?

H

HabboEmre

Neues Mitglied
Ich will, dass wenn man mit der Maus über ein Bild geht das da steht "Beispiel" . Ich glaub das nennt man ein Tooltip,ich weiß aber nicht genau wie das heißt. Aufjedenfall: Mit der Maus auf ein Bild->"Besipiel" .
Damit ihr auch versteht was ich meine ein kleines Bild. :D
home.png
 
Füge in den <img> tag ein title-atribut hinzu, dessen Inhalt ist dann der Tooltip.

Du kannst dir solche Fragen leicht selbst beantworten, in dem du dir im Internet eine Stelle suchst, an der es so ist und dir dort den Quelltext anguckst. Sehr komfortabel z.B. mit Firebug.
 
Danke für die antwort, aber so hab ich mir das nicht wirklich vorgstellt. Man sollte so etwas wie auf dem Bild haben.
 
Dann brauchst du Javascript. Die funktion heisst onmouseover. Ich kenne mich zu wenig aus um dir genauer zu erlären wies funktioniert, aber Google weiss das sehr genau!

Viel Spass noch...
 
Also ich löse das wie folgt - macht ein mal Arbeit, aber die Möglichkeiten sind grenzenlos:

1. Javascript
Code: 
<script type="text/javascript">
wmtt = null;
document.onmousemove = updateWMTT;
function updateWMTT(e) {
  if (wmtt != null && wmtt.style.display == 'block') {
    x = (e.pageX ? e.pageX : window.event.x) + wmtt.offsetParent.scrollLeft - wmtt.offsetParent.offsetLeft;
    y = (e.pageY ? e.pageY : window.event.y) + wmtt.offsetParent.scrollTop - wmtt.offsetParent.offsetTop;
    wmtt.style.left = (x + 20) + "px";
    wmtt.style.top   = (y + 20) + "px";
  }
}
function showWMTT(id) {
  wmtt = document.getElementById(id);
  wmtt.style.display = "block";
}
function hideWMTT() {
  wmtt.style.display = "none";
}
</script>

2. Einen DIV-Tag, der den Inhalt des Tooltips beinhaltet - dort kannst Du alles mögliche reinpacken. Text, Bilder, Tabellen... Jeder Tooltip mit unterschiedlichem Inhalt braucht eine eigene eindeutige ID
Code: 
<div id="tooltip1" class="tooltip">Niedersachsen</div>

3. Eine CSS-Formatierung, zumindest wenn es schön werden soll
Code: 
.tooltip {
  position: absolute;
  display: none;
  background-color: #ff00bb;
  border-width: 1px;
  border-style: solid;
  border-color: #000;
  padding: 5px;
  text-align: left;
  text-decoration: none;
  font-family: Tahoma;
  font-size: 12px;
  font-weight: bold;
  z-index: 1000;
}

4. Einen Link, der den Tooltip mit der entsprechenden ID aufruft, href ist nicht zwingend notwendig
Code: 
<onmouseover="showWMTT('tooltip1')" onmouseout="hideWMTT()" href="deineseite.php" />
 
Zuletzt bearbeitet:
Hallo hohesc
Ich weiss nicht, ob ich nach so langer Zeit noch eine Frage zu Deinem Code stellten darf. Ich versuche es trotzdem ;-)

Wie muss ich Deinen Code anpassen, damit die id variabel ist?

Auf "meiner" Seite werden Bilder von den Vereinsmitgliedern angezeigt. Diese werden jeweils mit einer mySQL-Abfrage aus der Admidio-Mitgliederverwaltung abgerufen. Nun möchte ich, dass beim Hoovern ein Ganzkörperbilder der jeweiligen Person angezeigt wird. Den Code habe ich bereits so weit anpassen können, dass es mit der ersten Person funktioniert. Bei allen anderen Personen wird aber auch noch das Bild der ersten Person angezeigt. Ich vermute, dass dies mit der id "pic" zusammenhängt, welche offenbar nicht neu "gefüllt" wird....

Oder bin ich diesbezüglich auf dem Holzweg?

Hier der entsprechende Ausschnitt des Codes:

HTML: 
<figure>
        <div class="tooltip1" id="pic"><img src="admidio/adm_program/modules/profile/profile_photo_gross_zeigen.php?user_uuid=<?=$zeile->usr_uuid;?>"></div>

        <a img="#" onMouseOver="showWMTT ('pic')" onMouseOut="hideWMTT()"><img src="admidio/adm_program/modules/profile/profile_photo_zeigen.php?user_uuid=<?=$zeile->usr_uuid;?>"></a>

</figure>

Besten Dank für Deine Hilfe und liebe Grüsse
voumi
 
Hallo @voumi
Bei Tooltipps empfehle ich, es nicht selbst zu machen sondern eine ausgereifte Bibliothek zu verwenden wie Tooltipster:
Begründung: Wenn das Tooltipp etwas größer sein muss, wie es bei deinen Bilder wahrscheinlich der Fall ist, muss die Position intelligent und flexibel fest gelegt werden: Liegt z. B. das Element weit links oben muss der Tooltipp rechts unten davon angezeigt werden; liegt das Element dagegen rechts unten genau entgegen gesetzt.
 
Vielen Dank. Ich werde 'mal versuchen, mich bezüglich tooltipster schlau zu machen - wenn ich auch befürchte, dass ich mein "Grundproblem" bezüglich Schleife dadurch nicht werde lösen können.
...und bitte entschuldigt, dass ich mein Anliegen hier gepostet habe. Ich ging - offenbar fälschlicherweise - davon aus, dass es hier am richtigen Ort ist, da ich den geposteten Code als Basis verwendet habe.
Liebe Grüsse
voumi
 
PS:
wenn ich auch befürchte, dass ich mein "Grundproblem" bezüglich Schleife dadurch nicht werde lösen können.
Zum Vergrößern anklicken....
Ich vermute, Du meinst damit, dass Du den Tooltip auf mehrere Elemente anwenden willst statt nur auf eines? Dazu brauchst Du keine Schleife, es reicht, wenn Du diesen Elementen die Klasse "tooltip" gibst, dann macht das Plugin das automatisch. Siehe das Kapitel "Getting Started".
 
Ja, genau. Die verschiedenen Bilder werden mit einer Schleife aus Admidio abgerufen. Der Tooltip soll nun eigentlich dasselbe machen, einfach mit grösseren Bildern, welche den selben Namen haben, aber in einem anderen Verzeichnis liegen...
Dein Hinweis macht mich momentan etwas zuversichtlicher... Vielen Dank. :-)
 
Der Tooltip soll nun eigentlich dasselbe machen, einfach mit grösseren Bildern, welche den selben Namen haben, aber in einem anderen Verzeichnis liegen...
Zum Vergrößern anklicken....
Wenn man das weiß, kann man das mit Tooltipster recht einfach erledigen, ohne dass Du in jedem Element das HTML für das große Bild im title-Attribut zusätzlich definieren musst:
Code: 
    <img src="thumbs/dia1.jpg" class="tooltipster">
    <img src="thumbs/dia2.jpg" class="tooltipster">
    <img src="thumbs/dia3.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('thumbs', 'images');
                // Jetzt können wir den Inhalt des Tooltipps als HTML
                // mit einem img-Tag festlegen:
                $(helper.origin).tooltipster('content', $(`<img src="${imgUrl}">`));
            }
        });
    </script>
Die Verzeichnisse "thumbs" und "images" sind nur Beispiele aus meiner Testkonfiguration, Du musst sie natürlich durch deine eigenen Pfade ersetzen.
 
Zuletzt bearbeitet:
Oh - Du bist aber fix. Vielen Dank. Ich versuche dieses Wochenende meine Site entsprechend anzupassen und werde über Erfolg (hoffentlich) oder Misserfolg (hoffentlich nicht) berichten.
 
Leider habe ich es nicht hin bekommen.... Aber vielen Dank für das Auskommentieren Deines Codes (Auch wenn ich ihn nicht 100% kapiert habe....) Ich vermute, dass ich aber bereits an den Vorbereitungs- bzw. Installationsarbeiten von Tooltipster gescheitert bin.
Ich habe die Datei 'master.zip' heruntergeladen und entpackt. Danach habe ich die Datei 'jquery-3.7.0.js' ins js-Verzeichnis meines Hostings kopiert. Dorthin habe ich auch alle Dateien und Verzeichnisse kopiert, welche unter dist/js waren. Die Dateien und Verzeichnisse, welche unter dist/css waren, habe ich ins CSS-Verzeichnis meines Hostings kopiert.

Danach habe ich den Code von der toolster-Homepage und Deinen Code in eine php-Datei geschrieben, so dass die Datei nun so aussieht:

HTML: 
<?php
defined('_JEXEC') or die('Restricted access');
?>


<head>

    <link rel="stylesheet" type="text/css" href="css/tooltipster.css" />

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.tooltipster.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>

Vielleicht noch ein paar Worte zu "meiner" Homepage: Grundsätzlich läuft sie mit Joomla (Aktuell leider noch mit der Version 3). Um eigenen Code ausführen zu können, habe ich die 'php-bridge' installiert. Somit kann ich php-Dateien in einem separaten Verzeichnis ablegen, welche ich dann via Joomla aufrufen kann. Obige Datei liegt ebenfalls dort und zeigt beim Ausführen das kleine Bild an. Beim Hoovern passiert aber gar nichts - nicht die geringste Reaktion.

Das nächste Problem dürfte dann sein, dass ich mein Bild so abrufen muss:

HTML: 
<img src="admidio/adm_program/modules/profile/profile_photo_zeigen.php?user_uuid=<?=$zeile->usr_uuid;?>" class="tooltipster">

...und das grosse Bild so: (der Unterschied ist das Wort 'gross_')

HTML: 
<img src="admidio/adm_program/modules/profile/profile_photo_gross_zeigen.php?user_uuid=<?=$zeile->usr_uuid;?>" class="tooltipster">

Meinst Du, dass ich das mit tooltipster hinbekomme?

Vielen Dank für Deine Zeit und liebe Grüsse

voumi

PS: Kann es sein, dass sich auf der Tooltipster-Homepage im <head>-Code noch Schreibfehler eingeschlichen haben:
Eine 'css/tooltipster.css' gibt es bei mir nicht - eine 'css/tooltipster.main.css' hingegen schon.
Eine 'js/tooltipster.min.js' gibt es bei mir ebenfalls nicht - eine 'js/tooltipster.main.js' hingegen schon.
Allerdings funktioniert es auch nicht, wenn ich diese beiden Änderungen im Code mache...
 
Zuletzt bearbeitet:
Ich vermute, dass ich aber bereits an den Vorbereitungs- bzw. Installationsarbeiten von Tooltipster gescheitert bin.
Zum Vergrößern anklicken....
Das vermute ich auch. Bist Du schon mit den Entwicklerwerkzeugen deines Browsers vertraut? Rechtsklick auf ein Element auf der Seite und dann "(Element) untersuchen". Es öffnet sich ein neues Fenster, darin das Netzwerk-/Network-Tab auswählen. Dort siehst Du dann ob die Dateien erfolgreich geladen wurden (200) oder nicht gefunden (404). Auch das Tab "Console" ist sehr wichtig, dort werden ggf. Fehlermeldungen von Javascript ausgegeben.
Selber musste ich auch ein wenig probieren und in der Doku nachlesen. Ich musste dann die Dateien mit "bundle" laden, sieht bei mir so aus:
Code: 
    <link rel="stylesheet" href="/css/tooltipster.bundle.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="/js/tooltipster.bundle.js"></script>
Dass die Pfade mit einem Schrägstrich beginnen, liegt an meiner Testkonfiguration, Du wirst diesen wahrscheinlich nicht brauchen.
Und ich habe die Dateien von Github herunter geladen, mit denen von der Tooltipster-Homepage gab es irgend welche Probleme.

Das nächste Problem dürfte dann sein, dass ich mein Bild so abrufen muss:
Zum Vergrößern anklicken....
Ich erwarte da eigentlich keine Probleme, das sind ja einfach nur Strings, die an den Server geschickt werden und es dürfte egal sein ob sich dahinter direkt ein Bild verbirgt oder ein PHP-Skript, das das Bild liefert.
 
Unter Konsole bzw. Netzwerk sind je 5 Fehler aufgelistet (Auf den ersten Blick scheinen es die selben 5 Fehler zu sein)
- Uncaught Error: Bootstrap's JavaScript requires jQuery at bootstrap.js:8:9
- GET https://homepage.ch/js/jquery.tooltipster.main.js net::ERR_ABORTED 404
- Refused to execute spript from 'https://homepage.ch/js/jquery.tooltipster.main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
- Uncaught TypeError: $(...).tooltipster is not a function at test:132:27
- Uncaught TypeError: $(...).affix is not a function at creative.js:2:20 at creative.js:7:3

Ich vermute 'mal, dass der Fehler Nummer drei jener sein könnte, welcher auch für andere Fehler ursächlich ist. Leider habe ich aber noch keine Ahnung, was ich gegen diesen Fehler unternehmen könnte.

Ich habe auch noch etwas mit den drei Zeilen im Code herum gespielt. Die Fehler bleiben in etwa immer gleich. Ich nehme 'mal an, dass die Dateien in den Zeilen 1 und 3 des Codes 1:1 auf dem Webspace vorkommen müssen. (...nur wegen der Schreibweise min bzw. main...) Die mittlere Zeile scheint sich nicht auf mein js-Verzeichnis zu beziehen - obwohl dort die Datei 'jquery-3.7.0.js liegt...

Während ich die obigen Zeilen schrieb, habe ich immer wieder etwas verändert und probiert - try and error halt ;-)
Als ich "meine" Zahlen in der mittleren Code-Zeile durch "Deine" ersetzte, passierte plötzlich etwas. Als Tooltip erscheint beim Hoovern ein Rechteck mit einem Dreieck nach links und einem nach rechts. In der Konsole / Netzwerk sind von den oben aufgeführten Fehlern nur noch der erste und der letzte vorhanden. Beim Hoovern erscheint jeweils aber noch ein neuer Fehler:
GET https://homepage.ch/https://homepage.ch/img/10000.jpg 404

Da ist wohl ein 'https://homepage.ch/' zu viel. Aber wo ist das eingefügt worden? Wenn ich im Browser 'https://homepage.ch/img/10000.jpg' eingebe, erscheint das Bild nämlich.
 
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:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben