#1

Wdn

Forum-Sponsorin  (97 Punkte)  ·   weiblich  ·   Deutschland  ·   Nachricht senden
 http://www.confido.org

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


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »W2D Fan« (27.12.2022, 10:34)
#2

Paulemann

Hero  (842 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.webdesign-bf.de

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


 

 

#3

Wdn

Forum-Sponsorin  (97 Punkte)  ·   weiblich  ·   Deutschland  ·   Nachricht senden
 http://www.confido.org

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

#4

Paulemann

Hero  (842 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.webdesign-bf.de

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. 

 


 

 

#5

W2D Fan

Ehrenmitglied  (4269 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

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.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#6

Frz2019

Mitglied  (31 Punkte)  ·   männlich  ·   Österreich  ·   Nachricht senden

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

CSS-Tooltip

Dies ist ein CSS-Tooltip, den ich im Internet gefunden habe!!

 

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

Somit bedanke ich mich vorab für Deine Bemühungen - Frz.

 


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »W2D Fan« (26.12.2022, 09:20)
#7

Frz2019

Mitglied  (31 Punkte)  ·   männlich  ·   Österreich  ·   Nachricht senden

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

 

564 Aufrufe | 7 Beiträge