Question Comment ajouter une info-bulle à un div


J'ai un tag div comme suit:

<html>
    <head></head>
    <body>
        <div>
            <label>Name</label>
            <input type="text"/>
        </div>
    </body>
</html>

Maintenant, je veux un javascript simple pour afficher une info-bulle sur: hover le div. Quelqu'un peut-il m'aider s'il vous plaît? L'infobulle devrait également avoir un effet de fondu entrant / sortant.


463
2017-08-19 04:49


origine


Réponses:


Pour l'info-bulle de base, vous voulez:

<div title="This is my tooltip">

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

http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632

Le lien ci-dessus vous donne 12 options pour les info-bulles.


727
2017-08-19 04:54



Ça peut être fait avec CSS uniquement, pas de javascript du tout : en cours d'exécution

  1. Appliquez un attribut HTML personnalisé, par exemple. tooltip="bla bla" à votre objet (div ou peu importe):

    <div tooltip="bla bla">
        something here
    </div>
    
  2. Définir la :before pseudo-élément de chaque [tooltip] objet d'être transparent, absolument positionné et avec tooltip="" valeur comme contenu:

    [tooltip]:before {            
        position : absolute;
         content : attr(tooltip);
         opacity : 0;
    }
    
  3. Définir :hover:before l'état stationnaire de chaque [tooltip] pour le rendre visible:

    [tooltip]:hover:before {        
        opacity : 1;
    }
    
  4. Appliquez vos styles (couleur, taille, position, etc.) à l'objet infobulle. fin de l'histoire.

Dans la démo, j'ai défini une autre règle pour spécifier si l'infobulle doit disparaître en survolant la cible mais en dehors du parent, avec un autre attribut personnalisé, tooltip-persistentet une règle simple:

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

Note 1: La couverture du navigateur est très large, mais pensez à utiliser un repli javascript (si nécessaire) pour le vieux IE.

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


223
2017-09-12 17:04



Vous n'avez pas besoin de JavaScript pour cela du tout; juste mettre le title attribut:

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

Notez que la présentation visuelle de l'info-bulle dépend du navigateur / du système d'exploitation, de sorte qu'elle risque de fondre et de ne pas l'être. Cependant, c'est la façon sémantique de faire les info-bulles, et cela fonctionnera correctement avec les logiciels d'accessibilité tels que les lecteurs d'écran.

Voir:

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


68
2017-08-19 04:53



Voici une bonne jQuery Tooltip:

https://jqueryui.com/tooltip/

Pour implémenter cela, il suffit de suivre ces étapes:

  1. Ajoutez ce code dans votre <head></head> Mots clés:

    <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 voulez avoir l'info-bulle, ajoutez simplement un title lui attribuer. Quel que soit le texte de l'attribut title, il apparaîtra dans l'info-bulle.

Remarque: Lorsque JavaScript est désactivé, il récupère l'info-bulle du navigateur / système d'exploitation par défaut.


16
2017-08-19 05:15



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

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

Un texte ToolTip formaté simple sur hover


15
2017-10-06 13:41



Voici un CSS pur 3 implémentation (avec JS optionnel)

La seule chose que vous avez à faire est de définir un attribut sur n'importe quel div appelé "data-tooltip" et que le texte sera affiché à côté de lui lorsque vous passez la souris dessus.

J'ai inclus du JavaScript optionnel qui va afficher l'info-bulle près du curseur. Si vous n'avez pas besoin de cette fonctionnalité, vous pouvez ignorer la partie JavaScript de ce violon.

Si vous ne voulez pas que le fondu enchaîne sur l’état de vol stationnaire, supprimer les propriétés de transition.

Il est stylé comme le title info-bulle de propriété. Voici le JSFiddle: http://jsfiddle.net/toe0hcyn/1/

Exemple HTML:

<div data-tooltip="your tooltip message"></div>

CSS:

*[data-tooltip] {
    position: relative;
}

*[data-tooltip]::after {
    content: attr(data-tooltip);

    position: absolute;
    top: -20px;
    right: -20px;
    width: 150px;

    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;

    display: block;
    font-size: 12px;
    line-height: 16px;
    background: #fefdcd;
    padding: 2px 2px;
    border: 1px solid #c0c0c0;
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.4);
}

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

JavaScript optionnel pour le changement d'emplacement de l'info-bulle en fonction de la position de la souris:

var style = document.createElement('style');
document.head.appendChild(style);

var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++) {
    var attr = allElements[i].getAttribute('data-tooltip');
    if (attr) {
        allElements[i].addEventListener('mouseover', hoverEvent);
    }
}

function hoverEvent(event) {
    event.preventDefault();
    x = event.x - this.offsetLeft;
    y = event.y - this.offsetTop;

    // Make it hang below the cursor a bit.
    y += 10;

    style.innerHTML = '*[data-tooltip]::after { left: ' + x + 'px; top: ' + y + 'px  }'

}

12
2017-09-11 21:49



D'accord, voici toutes vos exigences de primes rencontrées:

  • Non jQuery
  • Apparition instantanée
  • Pas de disparition jusqu'à ce que la souris quitte la zone
  • Effet de fondu entrant / sortant incorporé
  • Et enfin ... une solution simple

Voici une démo et un lien vers mon code (JSFiddle)

Voici les fonctionnalités que j'ai incorporées dans ce violon purement JS, CSS et HTML5:

  • Vous pouvez définir la vitesse du fondu.
  • Vous pouvez définir le texte de l'info-bulle avec une variable simple.

HTML:

<div id="wrapper">
    <div id="a">Hover over this div to see a cool tool tip!</div>
</div>

CSS:

#a{
    background-color:yellow;
    padding:10px;
    border:2px solid red;    
}

.tooltip{
    background:black;
    color:white;
    padding:5px;
    box-shadow:0 0 10px 0 rgba(0, 0, 0, 1);
    border-radius:10px;
    opacity:0;
}

JavaScript:

var div = document.getElementById('wrapper');
var a = document.getElementById("a");
var fadeSpeed = 25; // a value between 1 and 1000 where 1000 will take 10
                    // seconds to fade in and out and 1 will take 0.01 sec.
var tipMessage = "The content of the tooltip...";

var showTip = function(){    
    var tip = document.createElement("span");
    tip.className = "tooltip";
    tip.id = "tip";
    tip.innerHTML = tipMessage;
    div.appendChild(tip);
    tip.style.opacity="0"; // to start with...
    var intId = setInterval(function(){
        newOpacity = parseFloat(tip.style.opacity)+0.1;
        tip.style.opacity = newOpacity.toString();
        if(tip.style.opacity == "1"){
            clearInterval(intId);
        }
    }, fadeSpeed);
};
var hideTip = function(){
    var tip = document.getElementById("tip");
    var intId = setInterval(function(){
        newOpacity = parseFloat(tip.style.opacity)-0.1;
        tip.style.opacity = newOpacity.toString();
        if(tip.style.opacity == "0"){
            clearInterval(intId);
            tip.remove();
        }
    }, fadeSpeed);
    tip.remove();
};

a.addEventListener("mouseover", showTip, false);
a.addEventListener("mouseout", hideTip, false);

9
2017-09-12 14:43



Vous pouvez créer des info-bulles CSS personnalisées en utilisant un attribut de données, des pseudo-éléments et content: attr() par exemple.

http://jsfiddle.net/clintioo/gLeydk0k/11/

<div data-tooltip="This is my tooltip">
    <label>Name</label>
    <input type="text" />
</div>

.

div:hover:before {
    content: attr(data-tooltip);
    position: absolute;
    padding: 5px 10px;
    margin: -3px 0 0 180px;
    background: orange;
    color: white;
    border-radius: 3px;
}

div:hover:after {
    content: '';
    position: absolute;
    margin: 6px 0 0 3px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 10px solid orange;
    border-bottom: 5px solid transparent;
}

input[type="text"] {
    width: 125px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

3
2017-09-11 01:50



Que diriez-vous, le code désolé n'est pas optimisé parce que je suis pressé, mais je suppose que vous aurez l'idée:

http://jsfiddle.net/prollygeek/1b0Lrr8d/

//Auxiliary functions
function createToolTip(divName,tips)
{
 document.getElementById(divName).innerHTML+='<div class="tooltip">'+tips+'</div>' 
}
function removeToolTip(divName)
{
document.getElementById(divName).removeChild( document.getElementById(divName).getElementsByClassName("tooltip")[0])
}
function Tooltip(divName,tips)
{
document.getElementById(divName).onmouseover=function(){createToolTip(divName,tips)}

document.getElementById(divName).onmouseout=function(){removeToolTip(divName)}
}

//Sample Usage
Tooltip("mydiv","hello im a tip div")

3
2017-09-11 04:51



Le plus simple serait de définir position: relative sur l'élément contenant et position: absolute sur l'élément d'info-bulle à l'intérieur du conteneur pour le faire flotter par rapport au parent (élément contenant). Par exemple:

<div style="background: yellow;">
    <div style="display: inline-block; position: relative; background: pink;">
        <label>Name</label>
        <input type="text" />

        <div style="background: #e5e5e5; position: absolute; top: -10px; left: 0; right: 0;">
            Tooltip text
        </div>
    </div>
</div>

3
2017-09-11 09:30



<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI tooltip</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>  
  <script>
  $(function() {
    $("#tooltip").tooltip();
  });
  </script>
</head>
<body>
<div id="tooltip" title="I am tooltip">mouse over me</div>
</body>
</html>

Vous pouvez également personnaliser le style des info-bulles. Veuillez vous référer à ce lien: http://jqueryui.com/tooltip/#custom-style


2
2017-07-23 06:15