Ajouter une infobulle à un div

Question

J'ai une balise div comme ceci :

<div>
  <label>Name</label>
  <input type="text"/>
</div>

Comment puis-je afficher une infobulle sur :hover de la division, de préférence avec un effet de fondu en entrée/sortie.

Answer 1

Pour l'infobulle de base, vous voulez :

<div title="This is my tooltip">

comme :

.visible {
  height: 3em;
  width: 10em;
  background: yellow;
}

<div title="This is my tooltip" class="visible"></div>

Pour une version plus sophistiquée en javascript, vous pouvez consulter le site :

https://jqueryhouse.com/best-jquery-tooltip-plugins/

Le lien ci-dessus vous donne 25 options pour les infobulles.

Answer 2

C'est possible avec CSS uniquement pas de javascript du tout

Démonstration de fonctionnement

[data-tooltip]:before {
    /* needed - do not touch */
    content: attr(data-tooltip);
    position: absolute;
    opacity: 0;

    /* customizable */
    transition: all 0.15s ease;
    padding: 10px;
    color: #333;
    border-radius: 10px;
    box-shadow: 2px 2px 1px silver;    
}

[data-tooltip]:hover:before {
    /* needed - do not touch */
    opacity: 1;

    /* customizable */
    background: yellow;
    margin-top: -50px;
    margin-left: 20px;    
}

[data-tooltip]:not([data-tooltip-persistent]):before {
    pointer-events: none;
}

/* FOR TEST PURPOSES ONLY */
div {
    border: 1px solid silver;
    background: #ddd;
    margin: 20px;
    padding: 10px;
}

<div>Standard div, no tooltip here</div>

<div data-tooltip="Hi, I'm a tooltip. Pretty easy uh ? ;)">Div with standard tooltip. Hover me to see the tooltip.
    <br/>Hovering the tooltip doesn't matter:
    <br/>if you hover out of my boundaries, the tooltip will disappear.</div>

<div data-tooltip="Hi, I'm a persistent tooltip. I won't disappear when hovering me even if out of my parent boundaries. I'll also prevent other tooltips to fire :)" data-tooltip-persistent="foo">Div with persistent tooltip. Hover me to see the tooltip.
    <br/>The tooltip won't expire until you hover on me OR it.</div>

1. Appliquer un attribut HTML personnalisé, par exemple. data-tooltip="bla bla" à votre objet (div ou autre) :

    <div data-tooltip="bla bla">
        something here
    </div>

2. Définir le :before pseudo-élément de chaque [data-tooltip] objet pour être transparent, absolument positionné et avec data-tooltip="" valeur comme contenu :

    [data-tooltip]:before {            
        position : absolute;
         content : attr(data-tooltip);
         opacity : 0;
    }

3. Définir :hover:before l'état de survol de chaque [data-tooltip] pour le rendre visible :

    [data-tooltip]:hover:before {        
        opacity : 1;
    }

4. Appliquez vos styles (couleur, taille, position, etc.) à l'objet info-bulle ; fin de l'histoire.

Dans la démo, j'ai défini une autre règle pour spécifier si l'info-bulle doit disparaître lorsqu'on la survole mais en dehors du parent, avec un autre attribut personnalisé, data-tooltip-persistent et une règle simple :

[data-tooltip]:not([data-tooltip-persistent]):before {
    pointer-events: none;
}

Note 1 : La couverture des navigateurs est très large, mais pensez à utiliser une solution de repli en javascript (si nécessaire) pour le vieil IE.

Note 2 : Une amélioration pourrait consister à ajouter un peu de javascript pour calculer la position de la souris et l'ajouter aux pseudo-éléments, en modifiant une classe qui leur est appliquée.

Answer 3

Vous n'avez pas besoin de JavaScript pour cela ; il vous suffit de définir l'attribut title attribut :

<div title="Hello, World!">
  <label>Name</label>
  <input type="text"/>
</div>

Notez que la présentation visuelle de l'infobulle dépend du navigateur et du système d'exploitation. Elle peut donc s'afficher en fondu ou non. Cependant, il s'agit de la manière sémantique de créer des infobulles, et elle fonctionnera correctement avec les logiciels d'accessibilité tels que les lecteurs d'écran.

Démonstration dans Stack Snippets

<div title="Hello, World!">
  <label>Name</label>
  <input type="text"/>
</div>

Answer 4

Voici une jolie infobulle jQuery :

https://jqueryui.com/tooltip/

Pour ce faire, il suffit de suivre les étapes suivantes :

1. Ajoutez ce code dans votre <head></head> tags :

   <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>    
   <script type="text/javascript">
   $("[title]").tooltip();
   </script> 
   <style type="text/css"> 
   
   /* tooltip styling. by default the element to be styled is .tooltip  */
   .tooltip {
       display:none;
       background:transparent url(https://dl.dropboxusercontent.com/u/25819920/tooltip/black_arrow.png);
       font-size:12px;
       height:70px;
       width:160px;
       padding:25px;
       color:#fff;
   }
   </style> 

2. Sur les éléments HTML que vous souhaitez voir apparaître dans l'infobulle, ajoutez simplement une balise title à cet attribut. Le texte contenu dans l'attribut title figurera dans l'infobulle.

Note : Lorsque JavaScript est désactivé, l'infobulle est remplacée par celle du navigateur ou du système d'exploitation par défaut.

Answer 5

J'ai fait quelque chose qui devrait pouvoir être adapté à un div également.

HTML

<td>
    <%# (Eval("Name").ToString().Length > 65) ? Eval("Name").ToString().Substring(0, 60) + "..." : Eval("Name")%>
    <span class="showonhover">
        <a href="#"><%# (Eval("Name").ToString().Length > 65) ? "More" : "" %></a>
        <span class="hovertext">
            <%# Eval("Name") %>
        </span>
    </span>
</td>

CSS

.showonhover .hovertext { display: none;}
.showonhover:hover .hovertext {display: inline;}
a.viewdescription {color:#999;}
a.viewdescription:hover {background-color:#999; color: White;}
.hovertext {position:absolute;z-index:1000;border:1px solid #ffd971;background-color:#fffdce;padding:11px;width:150px;font-size: 0.75em;}

Pour une discussion plus approfondie, voir mon billet :

Un simple texte d'info-bulle formaté au survol de l'écran.