schermpje bij je muis
kan iemand me vertellen waar ik het volgende kan vind of vertellen hoe het gemaakt word.
het gaat om een schermpje dat bij je muis komt als je je muis op een link houd.
ik heb het laatst nog ergens gezien, even kijken of ik het nog kan vinden.
alvast bedankt
Javascript onmouseover="showTipbox( offset.left, offset.top, 'Text' );"
function showTipbox( offsetLeft, offsetTop, message )
{
// div met een position: absolute, margin-top = offsetTop, margin-left = offsetLeft, innerHTML = Text.
}
@ toysoldier, dankjewel, maar ik ben nog niet zo gevorderd in javascript :(
dus wat meet uitleg over hoe ik dat moet toepassen zou welkom zijn.
vb. <p title="Mr.Moe">Als je er nu met je muis op gaat staan zie je mijn nickname</p>
Niek schreef op 19.01.2009 08:39:
zoek maar op tooltip. Dit zul je namelijk wel met javascript moeten doen.
of css :)
Gewijzigd op 01/01/1970 01:00:00 door RvW Of toch niet
Leg mij dan eens uit hoe je een css only tooltip krijgt met willekeurige inhoud?
Code (php)
1
2
3
4
5
2
3
4
5
<ul>
<li><a href="#" title="test">Test</a>
<div>inhoud</div>
</li>
</ul>
<li><a href="#" title="test">Test</a>
<div>inhoud</div>
</li>
</ul>
de div verberg je standaard met bijv display: none;
Bij een hover op de li zet je de di op display:block;
Niek schreef op 19.01.2009 08:39:
zoek maar op tooltip. Dit zul je namelijk wel met javascript moeten doen.
dankje, ik heb de oplossing gevonden door daarop te zoeken.
http://www.walterzorn.com/tooltip/tooltip_e.htm
daar kunt je het vinden
Merijn schreef op 19.01.2009 15:21:
lang leve AJAX.. ik heb hier nog wel een script liggen die je kunt gebruiken..
AJAX? Hier wil je geen ajax voor gebruiken hoor
Voor jou gegeven html kan ik geen CSS bedenken... Voor deze wel:
<a href="">Link<span>Tooltip</span></a>
En dan het span element een display:block geven. Als je de A hovert kan je de volgende selector doen:
a:hover span
{
display:block;
}
En dan de juiste styling :)
Maar dit noem ik een benadering van een tooltip. Een tooltip moet volgens mij meegaan met je muis.
Een goed voorbeeld is: http://www.bosrup.com/web/overlib/
:)
You got a point :)
Maar <a href="">Link<span>Tooltip</span></a> kan natuurlijk ook. Is het zelfde idee als wat ik zei
Natuurlijk is dat ook een manier. En ik zeg ook niet dat die slecht is! Alleen dan zou je weer moeten gaan nadenken wat er gaat gebeuren als er geen css word ondersteund :)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
<title>Nieuwe pagina 1</title>
</head>
<body>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<a href="javascript:void(0);" onmouseover="return overlib('This is an ordinary
popup.');" onmouseout="return nd();">here</a>
<a href="javascript:void(0);" onmouseover="return overlib('This is what
we call a sticky, since I stick around (it goes away if you move the mouse
OVER and then OFF the overLIB popup--or mouseover another overLIB).',
STICKY, MOUSEOFF);" onmouseout="return nd();">here</a>
<a href="javascript:void(0);" onclick="return overlib('This is a sticky
with a caption. And it is centered under the mouse!', STICKY, CAPTION,
'Sticky!', CENTER);" onmouseout="nd();">Click here!</a>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
<title>Nieuwe pagina 1</title>
</head>
<body>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<a href="javascript:void(0);" onmouseover="return overlib('This is an ordinary
popup.');" onmouseout="return nd();">here</a>
<a href="javascript:void(0);" onmouseover="return overlib('This is what
we call a sticky, since I stick around (it goes away if you move the mouse
OVER and then OFF the overLIB popup--or mouseover another overLIB).',
STICKY, MOUSEOFF);" onmouseout="return nd();">here</a>
<a href="javascript:void(0);" onclick="return overlib('This is a sticky
with a caption. And it is centered under the mouse!', STICKY, CAPTION,
'Sticky!', CENTER);" onmouseout="nd();">Click here!</a>
</body>
</html>
Langleve automatische tooltips die zo ongeveer voor je worden gestyled: Hier!
(Edit; Ik zie net dat ik een gigantische bump heb gemaakt.. Ik had niet door dat ik bij "Mijn laatste forum activiteiten" aan het kijken was, excuses!)
Gewijzigd op 01/01/1970 01:00:00 door ToySoldier ZegIkNiet
vb in actie: http://cssglobe.com/lab/tooltip/03/