nicht angemeldet
Hallo Forumsteilnehmer,
ich habe einen Absatz, in dem sich ein Begriff befindet, der mit einem absolut positionierten Div als Tooltip näher erleutert werden soll. Der Begriff wurde wiederum in einen Div-Container gefasst und mit der Pseudoklasse :hover wird der Tooltip eingeblendet. Die absolute Positionierung bezieht sich auf den Div-Container des Begriffs.
Da der Absatz Fließtext beinhaltet kann es passieren, dass der Begriff sich am rechten Rand des Browserfensters befindet und der Tooltip-Div dann teilweise außerhalb des sichbaren Bereichs des Browserfensters angezeigt wird. Es wird dann zwar ein horizontaler Scrollbalken angeboten, was für mich aber keine schöne Lösung darstellt.
JavaScript kommt für mich in diesem Fall nicht in Frage. Die einzige Lösung, auf die ich bisher gekommen bin, besteht darin, die Positionierung des Tooltips nicht auf den Begriff sondern auf das Fenster zu beziehen und den Tooltip einfach immer am linken oder am rechten Rand des Browserfensters anzeigen zu lassen.
Ziel ist es aber, den Div-Container in der Nähe des Begriffs anzeigen zu lassen, ohne dass dieser außerhalb des sichtbaren Bereichs angezeigt wird.
Anbei der entsprechende Quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
.EanBox {
display: none;
position: absolute;
left: 0px;
border: 1px solid red;
width: 300px;
}
.EanContainer {
display: inline;
position: relative;
}
.EanContainer:hover .EanBox {
display: block;
}
-->
</style>
</head>
<body>
<p style="display: inline;">Quisque vitae mauris lacus! Sed ornare sodales neque ac cursus. Morbi justo orci, congue a hendrerit at, rutrum ultrices metus. Curabitur ut dignissim odio? Fusce id tortor ligula, et varius dolor! Sed euismod ante vitae elit accumsan eget bibendum neque tempus.</p>
<div class="EanContainer"><span style="font-weight: bold;">Begriff</span>
<div class="EanBox">
<h2>Tooltip</h2>
<p>Cras ornare dignissim felis id tincidunt. Nunc ut sapien metus.</p>
</div>
</div>
<p style="display: inline;">Proin pretium nisl eget neque molestie laoreet vel a magna. Maecenas lacinia, magna vitae pharetra pharetra, nisl sapien gravida libero, sit amet ornare ipsum nunc vel nibh. Duis a risus ante. Aliquam erat volutpat. In sed enim libero, quis ultrices ipsum. Morbi a vestibulum nunc.</p>
</body>
</html>