IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Infobulle dans un textarea


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Candidat au Club
    Profil pro
    Inscrit en
    Juillet 2010
    Messages
    2
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2010
    Messages : 2
    Par défaut 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 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

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut


    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;
      }
    }

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    Par défaut
    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;
      }
    }

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    @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.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    Par défaut
    Vu sous cet angle tu as tout à fait raison

Discussions similaires

  1. [Word][ISO-...] Copier coller d'un word dans un textArea
    Par yolepro dans le forum Servlets/JSP
    Réponses: 1
    Dernier message: 14/11/2005, 17h34
  2. [jsp][servlet][jdbc] afficher texte arabe dans un textarea
    Par villeneuvejsp dans le forum Servlets/JSP
    Réponses: 11
    Dernier message: 11/11/2005, 08h43
  3. détecter le nbre de saut de ligne (VbCrLf) dans un textarea
    Par yoda_style dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 28/04/2005, 14h54
  4. Insertion d'info dans un textarea
    Par krown dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 01/01/2005, 21h32
  5. Caratère spécial dans un textArea
    Par sigas dans le forum Composants
    Réponses: 4
    Dernier message: 21/07/2004, 12h18

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo