Infobulle dans un textarea
Bonjour,
J'utilise du code HTML/CSS pour la saisie d'un texte (plusieurs lignes) dans une appli interne
Au survol de ce texte, une info bulle est affichée.
quand les utilisateurs saisissent leur texte et veulent revenir sur un mot, ils sont 'génés' par l'info bulle car le curseur de la souris est positionné sur le texte.
Ma question : est-il possible d'afficher l'info bulle au survol pour quelques secondes et ensuite ne plus l'afficher ?
Mon code HTML
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| <html>
<head>
</head>
<body>
<form name="F" class="info_bulle">
<textarea type="text" name="note" id="note" onKeyup="return scanTouche(event,this.value)" rows=4 cols=72" >
</textarea>
<span><font color="red"><I><B>ATTENTION.</font></I></texta>bla bla bla
bla bla bla bla
bla bla bla bla
</body>
</html> |
mon code css:
Code:
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| <style type="text/css">
textarea:focus
{
border-style:none;
outline:none;
overflow:hidden;
}
textarea
{
border:0;
FONT-SIZE: 10pt;
FONT-FAMILY: Verdana ;
BACKGROUND-COLOR: transparent;
resize:none;
border-color:transparent;
border-style:none;
overflow:hidden;
/*text-transform:uppercase;*/
}
/* Rend invisible tout notre bloc span */
form.info_bulle span
{
color:black;
background:#FFFFE0;
padding:15px;
border-radius :10px;
position : absolute;
overflow : hidden;
/* Définition des bordures */
border : 1px solid #6699FF;
/* Faire disparaire infobulle par défaut */
/* On determine l'origine de la rotation */
transform:scale(0);
/* Effet sur la transparence */
opacity:0;
}
form.info_bulle
{
color : #2F368A;
text-decoration : none;
padding : 1px 16px 1px 1px; /*Définition des marges intérieures de notre lien */
/* Définition de l'arrière plan de notre lien */
background : transparent;
position : relative; /* Indispensable pour le bon positionnement de l'info-bulle */
}
form.info_bulle:hover
{
border : 0; /* ligne qui corrige le bug d'IE6 et inférieur */
}
/* Rend visible tout notre bloc span et lui attribue une taille */
form.info_bulle:hover span
{
top : 0;
left : 40%;
width : 350px;
FONT-SIZE : 8pt;
FONT-FAMILY: Verdana ;
/* font-weight: bold;*/
height : auto;
overflow : visible;
transform:scale(1);
/* Effet sur la transparence */
opacity:1;
box-shadow:10px 15px 10px #182856;
border:black 1px solid;
text-indent: 0;
}
</style> |
Merci pour vos réponses
