Zur Navigation

Wie muß ich den code ändern?

1 Günter Leipfinger

Hallo,
ich habe in einem html-Dokument kleine Vorschaubilder mit dem Originalbild verlinkt. Nun möchte ich beim Drüberfahren mit der Maus einen tooltip bekommen mit dem Inhalt
zur größeren Ansicht
.
mein css lautet:
      /* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: blue;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
und beim jeweiligen Link im body:
<div class="tooltip"><span class="tooltiptext">zur größeren Ansicht</span>
	<a href="Malerei/Acrylmalerei/album/slides/Eis.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/eis.jpg" width="200" height="166" alt=""/></a></div>
			
    <h3>Eis</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
soweit sogut, der Nachteil ist allerdings, daß der Tooltip nicht alleine beim Überfahren des Vorschaubildes kommt, sondern auch daneben.

25.03.2018 22:00

2 Jörg Kruse

Sollte eigentlich nicht passieren. Wegen dieser Zeile:

display: inline-block;

... ist div.tooltip genauso breit wie sein Inhalt, also das Bild dadrin. Entsprechend sollte ein Hovern links oder rechts vom Bild das Tooltip nicht sichtbar machen.

Mit dem Code-Ausschnitt, den du hier reingestellt hast, ist das Problem jedenfalls nicht reproduzierbar. Vielleicht hast du an anderer Stelle noch CSS-Anweisungen, die da einen Abstand reinhauen, der beim Hovern reagiert.

25.03.2018 22:53 | geändert: 25.03.2018 22:55

3 Günter Leipfinger

Danke Jörg, welchen code brauchst Du, um das beurteilen zu können?
noch ein screenshot:

Der waagrechte Strich über die gesamte Breite kommt nur, wenn dieser code 
<div class="tooltip"><span class="tooltiptext">zur größeren Ansicht</span>
über
href="Malerei/Acrylmalerei/album/slides/Eis.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/eis.jpg" width="200" height="166" alt=""/></a>
    <h3>Eis</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
steht.

25.03.2018 22:58 | geändert: 25.03.2018 23:39

4 Jörg Kruse

Vergleich mal deinen Code im ersten und letzten Beitrag: da gibt es einen entscheidenden Unterschied. Im ersten Beitrag schließt du <div class="tooltip"> direkt hinter dem </a>. Dadurch ist der Tooltip-Container auch nur so groß wie das Bild. Im letzten Beitrag schließt du das Div erst weiter unten. Weil u.a. das <h3> als Blockelement die volle Breite einnimmt, nimmt auch auch der Tooltip-Container die volle Breite ein. Übrigens würde ich auch das <p> noch schließen.

Sauber eingerückt mit dem dem </div> an richtiger Stelle:

<div class="tooltip">
    <span class="tooltiptext">zur größeren Ansicht</span>
    <a href="Malerei/Acrylmalerei/album/slides/Eis.jpg">
        <img src="Malerei/Acrylmalerei/album/thumbs_web/eis.jpg" width="200" height="166" alt=""/>
    </a>
</div>
<h3>Eis</h3>
<p>Acryl auf Leinwand<br>
60 x 50cm</p>

26.03.2018 09:44

1 Forenmitglied fand diesen Beitrag gut

5 Günter Leipfinger

Danke Jörg für Deine Bemühungen. Mein code lautet jetzt
	<div class="tooltip">
       <span class="tooltiptext">zur größeren Ansicht</span>
    <a href="Malerei/Acrylmalerei/album/slides/Eis.jpg">
        <img src="Malerei/Acrylmalerei/album/thumbs_web/eis.jpg" width="200" height="166" alt=""/>
    </a>
</div>
<h3>Eis</h3>
<p>Acryl auf Leinwand<br>
60 x 50cm</p>
Trotzdem ist die waagrechte Linie noch vorhanden und der tooltop erscheint schon, wenn ich auch außerhalb des Bildes bin.
Der css Code
.tooltip {
    position: relative;
   
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: blue;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

26.03.2018 10:43

6 Jörg Kruse

Ja, jetzt funktioniert das nicht mehr wie gewünscht, weil du diese Zeile entfernt hast:

display: inline-block;

PS: in meinem ersten Beitrag hatte ich ja geschrieben, dass der Hover nur über dem Bild das Tooltip öffnen sollte, gerade weil diese Zeile enthalten ist. Also nicht entfernen, sondern drin lassen!

26.03.2018 10:46 | geändert: 26.03.2018 10:50

7 Günter Leipfinger

Danke Jörg, nun sind noch zwei Schönheitsfehler:
-die waagrecht Linie ist noch vorhanden
-der tooltip verschwindet erst, wenn ich mit der Maus unter dieser Linie bin

26.03.2018 10:53

8 Jörg Kruse

Für die gepunktete Linie ist diese Zeile verantwortlich:

border-bottom: 1px dotted black; /* If you want dots under the hoverable text */

Außerdem haben Bilder standardmäßig noch einen kleinen Abstand unterhalb, der beim Hovern dann auch noch berücksichtigt wird. Den Abstand kann man beseitigen, indem man das Bild als Blockelement definiert:

.tooltip img {
    display: block;
}

26.03.2018 11:09

1 Forenmitglied fand diesen Beitrag gut

9 Günter Leipfinger

Jetzt ist alles ok -Vielen Dank!
noch eine Kleinigkeit:
Der Tooltipp erscheint auch wenn die Maus neben dem Bild ist. Er sollte doch erst erscheinen, wenn die Maus über dem Bild ist.

26.03.2018 12:59 | geändert: 26.03.2018 13:51

10 Jörg Kruse

Der Tooltipp erscheint auch wenn die Maus neben dem Bild ist. Er sollte doch erst erscheinen, wenn die Maus über dem Bild ist.

Die Zeile "display: inline-block;" hast du wieder an alter Stelle eingefügt?

26.03.2018 21:25