: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>