JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Auf Thema antworten

Beitrag: [QUOTE="DrMartinus, post: 8352, member: 1832"] Hallo, ich habe im CSS stylesheet tooltip-Klassen (source s. unten) eingerichtet und diese dann im Text eingebaut. Das Merkwürdige ist, dass dem ersten Tooltip-Wort ein Zeilenumbruch und eine Leerzeile vorangeht, obwohl im Text keine solche Dinge angegeben sind. Weitere im Text mit exakt den gleichen Tags eingebauten Tooltip-Wörtern erscheinen im Fließtext wie gewünscht. Hat jemand eine Ahnung, woran das liegen könnte? Wie ich gerade selbst ausprobiert habe, lässt sich das Problem auch mit dem nachfolgenden Codebeispiel nachvollziehen. Hier der Code: [CODE]<!DOCTYPE html> <html> <style> .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: 12em; background-color: silver; color: black; text-align: center; padding: .6em .6em .6em .6em; border-radius: 6px; border: 1px solid blue; /* Position the tooltip text*/ top: 10; bottom: 110%; left: 50%; margin-left: -90px; /* Use half of the width (120/2 = 60), to center the tooltip */ position: absolute; z-index: 1; } /*arrow at the bottom of the tooltip*/ .tooltip .tooltiptext::after { content: " "; position: absolute; top: 100%; /* At the bottom of the tooltip */ left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: silver transparent transparent transparent; } /* Show the tooltip text when you mouse over the tooltip container */ .tooltip:hover .tooltiptext { visibility: visible; } </style> <body> <P>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed <div class="tooltip">diam<span class="tooltiptext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt </span></div> voluptua. <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <div class="tooltip">Lorem<span class="tooltiptext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore </span></div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <div class="tooltip">labore<span class="tooltiptext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam </span></div> et dolore.</p> </body></html> [/CODE] [/QUOTE]

Authentifizierung