Infobulle dans un textarea

**magdayde** · 01/07/2017, 19h59

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**danielhagnoul** · 01/07/2017, 22h39

animation, compatible IE10 : https://developer.mozilla.org/fr/docs/Web/CSS/animation

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
/* 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;
  animation-name: example;
  animation-duration: 3s;
  visibility:hidden;
}
@keyframes example {
  from {
    visibility:visible;
  }
  to {
    visibility:hidden;
  }
}

**NoSmoking** · 02/07/2017, 08h01

Bonjour,
Daniel la propriété visibility n'est pas animable, il faudrait plutôt le faire avec opacity en ayant pris soin qu'elle soit initialement à 0.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
/* Rend visible tout notre bloc span et lui attribue une taille */
form.info_bulle:hover span {
  animation-name: example;
  animation-duration: 3s;
}
@keyframes example {
  from {
    opacity:1;
  }
  to {
    opacity:0;
  }
}

**danielhagnoul** · 02/07/2017, 11h07

@NoSmoking : oui et non !

Non, car si tu testes mon code tu verras qu'il fonctionne. C'est binaire on/off.

Oui, car il ne peut pas y avoir de point intermédiaire. Ce qui est possible avec opacity.

**NoSmoking** · 02/07/2017, 19h21

Vu sous cet angle tu as tout à fait raison

Infobulle dans un textarea

CSS

Vue hybride

Discussions similaires

Partager

Partager