[Erledigt] Mouseover soll kleines Textfeld öffnen

Hallo,

in einem Text benutze ich einen bestimmtem Begriff, der nicht allgemein bekannt ist. Überstreicht der Leser diesen Begriff mit der Maus, soll ein kleines Textfeld erscheinen mit der Erläuterung. Ich arbeite mit dem Design Louisville. Wie kann ich das mit Pro Web 3 erreichen?

Im Voraus vielen Dank für die bisher immer erfahrene kompetente und zeitnahe Hilfe.

Gruß

Katharina

In dem Du bei der Bereitstellung des Links unten den LinkTitel als Erläuterung nutzt.

Hallo Paulemann,

ich habe Dir gestern sofort geantwortet - wie auch jetzt über "Direkt antworten" - mich für Deinen Tipp bedankt, allerdings finde ich meine Antwort nicht in der Liste. Deshalb noch einmal.

In meinem Text kommt z.B. der Begriff Monsun vor. Gibt es eine Möglichkeit, über mouseover ein kleines Fenster mit der Erläuterung des Begriffs zu öffnen?
Sonst müsste man das Problem über eine neue Seite lösen, auf der die kurze Erklärung steht und auf die man verlinkt.

Vielen Dank im Voraus für Deine Mühe.

Gruß

Katharina

Tooltip>Du könntest es mit Aufwand lösen.....per HTML-Absatz und die Formatierung per Eintrag.

Die Lösung, die Du selbst beschreibst, würde ich aber empfehlen. 

Wenn du englisch kannst und dich mit HTML und CSS auskennst könntest du dir DIESE Seite mal ansehen und mit relativ wenig Aufwand m.N.n. recht elegante Tooltips per HTML-Absatz erstellen. Beispiele findest du auf der Seite und ich habe HIER selbst ein Beispiel erstellt.

Unnötiges Zitat gemäß Forenregeln § 2, Abs. 6 gelöscht [W2D Fan]

Hallo Marjore, irgendwie funktioniert die Sache (Pro Shop 6) bei mir nicht! - Vielleicht kannst Du kurz darüber schauen? - Danke vorab!

1. Ich platziere im Ordner unter Eigenschaften den CSS im Reiter HTLM im HEAD-Bereich (Habe ich 1:1 Deinem Quellcode entnommen) :

.tooltip {
display:inline-block;
position:relative;
border-bottom:1px dotted #666;
text-align:left;
font-weight: bold;
color: #ff0000;
}

.tooltip h3 {margin:12px 0;}

.tooltip .top {
min-width:200px;
max-width:400px;
top:-20px;
left:50%;
transform:translate(-30%,-100%);
padding:10px 20px;
color:#ffffff;
background-color:#009cdc;
font-weight:normal;
font-size:14px;
border-radius:8px;
position:absolute;
z-index:99999999;
box-sizing:border-box;
box-shadow:0 1px 8px rgba(0,0,0,0.5);
display:none;
}

.tooltip:hover .top {
display:block;
}

.tooltip .top i {
position:absolute;
top:100%;
left:30%;
margin-left:-15px;
width:30px;
height:15px;
overflow:hidden;
}

.tooltip .top i::after {
content:'';
position:absolute;
width:15px;
height:15px;
left:50%;
transform:translate(-50%,-50%) rotate(45deg);
background-color:#009cdc;
box-shadow:0 1px 8px rgba(0,0,0,0.5);
}

2. Danach öffne ich in diesem Ordner einen HTML-Absatz und füge z.B. nachfolgenden Code ein:

<div class="tooltip">Mühen<div class="top">
<h3>CSS-Tooltip</h3>
<p>Dies ist ein CSS-Tooltip, den ich im Internet gefunden habe!!</p>
<i></i>
</div>

............................................................

Das Ergebnis auf der Seite:

Mühen

Hat sich erledigt - habe den Fehler gefunden! Der <style>...</style> hat gefehlt!