:before und :after an tatsächliches Element anhaften?

[Klaus]

Hallo an alle,

ich möchte in einem ersten Schritt kleine Tooltips bei Links erzeugen, die bei einem MouseOver angezeigt werden.

Leider heftet der Browser in der Darstellung die :before und :after Inhalt nicht an das tatsächliche Element sondern einige Elemente höher als gewollt.

Die Seite beinhaltet ein paar verschachtelte Divs und später darin eben auch Links, die einen Tooltip anzeigen sollen.

Bei einem MouseOver wird der Tooltip zwar angezeigt, aber an dem 3. verschachtelten Div (form-wrapper) (das 30. Div insgesamt)

Warum wird der Tooltip nicht am eigentlichen <a>-Element angezeigt?
Wieso ausgerechnet am 'form-wrapper'-div?

Hier der entsprechende CSS-Part:

  
  
	a:link {text-decoration: none}  
	a:visited {text-decoration: none}  
	a:active {text-decoration: none}  
	a:hover {text-decoration: underline; color: red;}  
  
	a[data-tooltip]:before {  
	  position: absolute;  
	  left: 0;  
	  top: -40px;  
	  background-color: #ff0000;  
	  color: #ffffff;  
	  height: 30px;  
	  line-height: 30px;  
	  border-radius: 5px;  
	  padding: 0 15px;  
	  content: attr(data-tooltip);  
	  white-space: nowrap;  
	  display: none;  
	}  
  
	a[data-tooltip]:after {  
	  position: absolute;  
	  left: 15px;  
	  top: -10px;  
	  border-top: 7px solid #ff0000;  
	  border-left: 7px solid transparent;  
	  border-right: 7px solid transparent;  
	  content: "";  
	  display: none;  
	}  
  
	a[data-tooltip]:hover:after, a[data-tooltip]:hover:before {  
	  display: block;  
	}  
  
#form-wrapper {  
	background-color:#F2F7F9;  
/*		width:465px;   */  
	padding:15px;  
	margin: 5px auto;  
	border: 2px solid #8FB5C1;  
	-webkit-border-radius:15px;  
	border-radius:15px;  
	position:relative;  
}  
  

Und der HTML-Teil mit dem Link und dem gewünschten Tooltip.

  
<div>  
<br/>  
<input type="checkbox" name="upd_owndb" <? if ($upd_owndb== 'on') echo ' checked '; ?>> <a href="#" data-tooltip="Sofern dafür freigeschaltet, kann der Eintrag auch in der DB eingetragen werden.">auch in DB eintragen?</a>  
</div>  
  

[MudGuard]

Hi,

a[data-tooltip]:before {
  position: absolute;
  left: 0;
  top: -40px;

  
Du schiebst das Teil 40px nach oben und wunderst Dich dann, daß es weiter oben sitzt?  
  
Abgesehen davon: welches ist das innerste Vorfahrenelement des a-Elements, dessen position nicht static ist? Jenes Element ist die Basis der absoluten Positionierung ...  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
[O o ostern ...](http://ostereier.andreas-waechter.de/)  
  
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.  

[Klaus]

Hallo Andreas,

Du schiebst das Teil 40px nach oben und wunderst Dich dann, daß es weiter oben sitzt?

Abgesehen davon: welches ist das innerste Vorfahrenelement des a-Elements, dessen position nicht static ist? Jenes Element ist die Basis der absoluten Positionierung ...

"weiter oben" ist ja gewollt. Aber nicht mehr als satte 500px.

Scheinbar ist das innerste Vorfahren-Element des a-Tags das "form-wrapper"-div.
Ich habe jetzt dem a-Tag einfach ein style="position:relative;" mitgegeben und jetzt funktioniert es wie gewollt.

Danke für den Hinweis, ich dachte position:relative wäre Default.

Ein schönes Wochenende,

Klaus

[MudGuard]

Hi,

Danke für den Hinweis, ich dachte position:relative wäre Default.

nein, position hat als Default-Wert static.
Hätte ein kurzer Blick in die Spec bestätigt (10 Stunden Rumprobieren erspart 3 Minuten Handbuchlesen)

cu,
Andreas