Tijden veranderen
Jquery simpel tooltip
Ik zag een tutorial over Qtip van Jquery maar ik kon er niet goed mee op weg dus ik heb me eigen tooltip gemaakt:
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tooltip</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
</head>
<body>
<a href="http://www.phphulp.nl/" title="PHPHulp" id="link">PHPHulp</a><br><br>
<a href="http://www.sitemasters.be/" title="Sitemasters.be" id="link">Sitemasters.be</a>
<script type="text/javascript">
$(document).ready(function() {
$('*').css('font-family', 'Arial');
$('body').css('font-size', '15');
$('a#link').css('padding', '0');
$('a#link').hover(function() {
var title = $(this).attr('title');
$(this).html(title);
$(this).css('background', 'green');
$(this).css('padding', '3');
$(this).css('color', 'red');
$(this).css('-moz-border-radius', '5');
$(this).css('-webkit-border-radius', '5');
$(this).css('-moz-box-shadow', '0 0 6px black');
$(this).css('text-decoration', 'none');
$(this).css('padding-left', '30');
$(this).css('padding-right', '30');
$(this).css('padding-top', '5');
$(this).css('padding-bottom', '5');
$(this).css('border', '1px solid black');
$(this).css('font-size', '13');
});
$('a#link').mouseleave(function() {
var title = $(this).attr('title');
var href = $(this).attr('href');
$(this).html('<a href="'+href+'" title="'+title+'">'+title+'</a>');
$(this).css('background', 'none');
$(this).css('color', 'none');
$(this).css('-moz-border-radius', 'none');
$(this).css('-webkit-border-radius', 'none');
$(this).css('-moz-box-shadow', 'none');
$(this).css('text-decoration', 'none');
$(this).css('padding', '0');
$(this).css('padding-left', '0');
$(this).css('padding-right', '0');
$(this).css('padding-top', '0');
$(this).css('padding-bottom', '0');
$(this).css('border', '0px solid black');
$(this).css('font-size', '15');
});
});
</script>
</body>
</html>
<html>
<head>
<title>Tooltip</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
</head>
<body>
<a href="http://www.phphulp.nl/" title="PHPHulp" id="link">PHPHulp</a><br><br>
<a href="http://www.sitemasters.be/" title="Sitemasters.be" id="link">Sitemasters.be</a>
<script type="text/javascript">
$(document).ready(function() {
$('*').css('font-family', 'Arial');
$('body').css('font-size', '15');
$('a#link').css('padding', '0');
$('a#link').hover(function() {
var title = $(this).attr('title');
$(this).html(title);
$(this).css('background', 'green');
$(this).css('padding', '3');
$(this).css('color', 'red');
$(this).css('-moz-border-radius', '5');
$(this).css('-webkit-border-radius', '5');
$(this).css('-moz-box-shadow', '0 0 6px black');
$(this).css('text-decoration', 'none');
$(this).css('padding-left', '30');
$(this).css('padding-right', '30');
$(this).css('padding-top', '5');
$(this).css('padding-bottom', '5');
$(this).css('border', '1px solid black');
$(this).css('font-size', '13');
});
$('a#link').mouseleave(function() {
var title = $(this).attr('title');
var href = $(this).attr('href');
$(this).html('<a href="'+href+'" title="'+title+'">'+title+'</a>');
$(this).css('background', 'none');
$(this).css('color', 'none');
$(this).css('-moz-border-radius', 'none');
$(this).css('-webkit-border-radius', 'none');
$(this).css('-moz-box-shadow', 'none');
$(this).css('text-decoration', 'none');
$(this).css('padding', '0');
$(this).css('padding-left', '0');
$(this).css('padding-right', '0');
$(this).css('padding-top', '0');
$(this).css('padding-bottom', '0');
$(this).css('border', '0px solid black');
$(this).css('font-size', '15');
});
});
</script>
</body>
</html>
Dus ik wil weten of het nut heeft?
Je moet altijd proberen HTML/CSS/JS/PHP van elkaar te scheiden. Je kan dus de tooltip een class/id meegeven en die dan met css opmaken.
Daarnaast is het handiger om de js code in de head te stoppen.
En append to is een functie die je hierbij veel beter kan gebruiken.
- Aar - op 11/12/2010 12:14:52:
Waarom maak je er geen eigen functie van?
wou alleen ff kijken of gij goed was
Code (php)
1
2
2
$('*').css('font-family', 'Arial');
$('body').css('font-size', '15');
$('body').css('font-size', '15');
Waarom herschrijf je dit???
Verder, wat Kris zegt gebruiken. Herschrijf de <a>-tag niet maar voeg bijvoorbeeld een nieuwe div toe aan de onderkant van je document, die je vervolgens laat zien als je over die link heen gaat. Die positioneer je vervolgens. Dit is gewoon wéér niks..