Links mit Vorschaubild und Vorschautext, wenn man mit der Maus auf dem Link bleibt (wie bei Wikipedia).

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

DerLocke

Neues Mitglied
12 September 2020
5
0
1
31
Online habe ich nur wenige Lösungen gefunden, die dann doch irgendwie nicht funktioniert hatten.

Mein Gedanke war, dass ich mit der Kasse wp-block-image size-large etwas anfangen kann. So das man auf jeden internen Link automatisch das Headerbild in klein sehen kann und dazu noch die ersten 30 Wörter im Text.

Ich bin auf meiner Suche gefühlte 10 Millionen mal auf Bildbenennung mit alt, title usw. gestoßen aber ich möchte kein Bild mit Text versehen, sondern den Textlink mit Bild, wenn man mit der Maus darüber fährt. So, dass man, wenn man mit der Maus darüber fährt sowohl das Beitragsbild als auch etwas Text sehen kann. So wie auf Wikipedia.

Die Klasse der Bilder ist immer unterschiedlich aber die Klasse von "figure" ist immer gleich. Vielleicht ´kann man damit etwas anstellen.

<figure class="wp-block-image size-large"><img loading="lazy" src="Bild.jpg" alt="Mundschutz. " class="wp-image-643575" srcset="Bild.jpg 300w, Bild.jpg 768w, Bild.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px" width="1024" height="341"><figcaption><strong>Text</strong> – <strong>Text</strong>!</figcaption></figure>

bei Wikipedia ist nur ein title, also muss das ja irgendwie automatisch gehen aber mir würde es schon reichen, wenn ich einfach z.B. class="beitragsbildmittext" oder so noch per hand einfügen muss.
 

Anhänge

DerLocke

Neues Mitglied
12 September 2020
5
0
1
31
Leider passiert nichts...

Habe bei Wordpress unter Stylesheet (style.css) folgendes eingefügt:

a.tooltip {
position: relative;
text-decoration: none;
}
a.tooltip:after {
content: attr(data-tooltip);
position: absolute;
bottom: 130%;
left: 20%;
background: #ffcb66;
padding: 5px 15px;
color: black;
-webkit-border-radius: 10px;
-moz-border-radius : 10px;
border-radius : 10px;
white-space: nowrap;
opacity: 0;
-webkit-transition: all 0.4s ease;
-moz-transition : all 0.4s ease;
transition : all 0.4s ease;
}
a.tooltip:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 20px solid #ffcb66;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
-webkit-transition: all 0.4s ease;
-moz-transition : all 0.4s ease;
transition : all 0.4s ease;
opacity: 0;
left: 30%;
bottom: 90%;
}
a.tooltip:hover:after {
bottom: 100%;
}
a.tooltip:hover:before {
bottom: 70%;
}
a.tooltip:hover:after, a:hover:before {
opacity: 1;
}

Dann habe ich den Link mit class="tooltip" und data-tooltip="TextHalt" versehen aber es passiert nichts....

<a href="LinkVonDerSeite" class="tooltip" data-tooltip="Funktioniert leider nicht!">
Stet clita kasd gubergren
</a>

 

jonas3344

Mitglied
25 Oktober 2019
52
20
8
37
Ich weiss nicht was du da rausgesucht hast, aber normalerweise hat ein Tooltip einen JavaScript-Teil, welchen den Inhalt in data-tooltip dann in den Tooltip setzt. Dort wo du das her hast sollte es eine Anleitung geben.
 

jonas3344

Mitglied
25 Oktober 2019
52
20
8
37
Einen zweiten Beitrag brauchts nicht.

Wie gesagt, das nennt sich Tooltip. Zumeist musst du ein Script einbetten welches das Tooltip erstellt und mit Inhalt füllt. Nur mit CSS dürfte das was du gerne hättest nicht funktionieren.


Such Dir eines aus und bau es ein.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.998
377
83
67
Nur mit CSS dürfte das was du gerne hättest nicht funktionieren.
Den Code aus #3 habe ich getestet und er funktioniert einwandfrei. Ich vermute, dass es an der Wordpress-Umgebung liegt, dass es beim TO nicht funktioniert.
Normaler Weise empfehle ich in diesem Fall ein Plugin wie Tooltipster, aber ich befürchte, dass es damit auch Problem in der WP-Umgebung gibt. Vielleicht besser ein Wordpress-Plugin für Tooltips suchen.
 

jonas3344

Mitglied
25 Oktober 2019
52
20
8
37
Wenn ich es richtig verstanden habe hätte er gerne ein Tooltip mit einem Bild und auch Text aus einem bestimmten tag und ich glaube da dürfte es mit CSS pur dann schwierig werden.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.998
377
83
67
Auch mit Text und Bild oder beliebigen Inhalten nicht besonders schwierig:
HTML:
    <a href="https://www.html.de" class="tooltip">Der Link</a>
    <figure class="tt-content">
        <img src="images/ballon2.jpg">
        <figcaption>
            Die Beschreibung zum Bild
        </figcaption>
    </figure>
CSS:
        .tt-content {
            display: none;
        }

        a.tooltip:hover+.tt-content {
            display: block;
        }
Der Grund, warum ich statt dessen ein Plugin empfehle:
Damit der Tooltip zuverlässig sichtbar ist, muss die Position variabel fest gelegt werden: Link ganz links oben -> Tooltip rechts darunter; Link ganz rechts unten -> Tooltip links darüber.
 
Werbung:

Neueste Beiträge