Forums Neueste Beiträge
 

Hovertooltip

18/11/2009 - 07:34 von Andreas Kammann | Report spam
Hallo, ich stelle mittels eines Repeaters diverse Daten da. Ich möchte jetzt
gerne wenn man auf einem Namen mit der Maus geht, das diverse Informationen
in einer Art Tooltip Bubble oder Popupfenster dargestellt werden. Diese
Daten sollten nach Möglichkeit nicht extra mehr geladen werden. Wie macht
man sowas aktuell? Benutzt man dafür jQuery ? oder das Ajaxtoolkit?
Bin aber nicht so der Javascript Experte.
 

Lesen sie die antworten

#1 Stefan Falz [MVP]
18/11/2009 - 08:56 | Warnen spam
Hallo Andreas,

"Andreas Kammann" schrieb:

Hallo, ich stelle mittels eines Repeaters diverse Daten da. Ich möchte jetzt gerne wenn man auf einem Namen mit der Maus geht, das
diverse Informationen in einer Art Tooltip Bubble oder Popupfenster dargestellt werden.



da würde ich dann einen Container mit den gewünschten Informationen einfügen und
den per CSS verstecken. Das Element, dass dann für die Anzeige des Infocontainers
zustàndig ist, braucht im einfachsten Fall nur noch per :hover ... das untergeordnete
Element einzublenden.

Vereinfacht sieht das bspw. so aus:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xht...">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Tooltip Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div.TooltipParent
{
margin-top : 20px;
cursor : pointer;
}

div.Tooltip
{
display : none;
position : absolute;
width : 100px;
border : 1px solid #000000;
}

div.TooltipParent:hover > div.Tooltip
{
display : block;
}
</style>
</head>
<body>

<div class="TooltipParent">
Info 1
<div class="Tooltip">
Hier kommt dann der Text 1 und evtl. noch ein Bild, ...
</div>
</div>

<div class="TooltipParent">
Info 2
<div class="Tooltip">
Hier kommt dann der Text 2 und evtl. noch ein Bild, ...
</div>
</div>

<div class="TooltipParent">
Info 3
<div class="Tooltip">
Hier kommt dann der Text 3 und evtl. noch ein Bild, ...
</div>
</div>

</body>
</html>



Du musst dann lediglich dafür sorgen, dass die gewünschten Inhalte in
der HTML Ausgabe drinstehen.

HTH

Tschau, Stefan
Microsoft MVP - Visual Developer ASP/ASP.NET
http://www.asp-solutions.de/ - Consulting, Development
http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

Ähnliche fragen