Ajouter une info-bulle à un div

569

J'ai une balise div comme celle-ci:

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

Comment afficher une info-bulle sur :hoverla div, de préférence avec un effet de fondu d'entrée / sortie.

javascript  html  css  tooltip 
— user475685
source
2
Pour une solution CSS + JavaScript simple, je ne pense pas que vous pouvez battre le post de Daniel Imms sur stackoverflow.com/questions/15702867/…
— Rick Hitchcock
1
— Andrea Ligios
— Pooja Kedar

Réponses:

897

Pour l'infobulle de base, vous voulez:

<div title="This is my tooltip">

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

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

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

— sscirrus
source
2
Une chose à surveiller avec une info-bulle de titre est que si l'utilisateur clique sur votre div, l'infobulle n'apparaîtra pas. Cela peut être très frustrant ... surtout si votre div semble devoir être cliqué. par exemple: style = "curseur: pointeur;"
— RayLoveless
2
@RayL Ce n'est pas un comportement standard pour qu'une info-bulle soit cliquable - cela brouille les liens et les info-bulles, empêchant l'utilisateur de savoir si un mot en surbrillance 1) leur donnera plus d'informations ou 2) les amènera entièrement sur une autre page. En général, mauvaise pratique.
— sscirrus
@sscirrus Je suis d'accord. C'est pourquoi vous ne devez PAS styliser vos info-bulles avec "curseur: pointeur;" (encourage à cliquer) que je vois trop souvent.
— RayLoveless
18
Si vous voulez seulement montrer une info-bulle pour un morceau de texte, comme des "détails" pour un mot-clé ou quelque chose comme ça, utilisez <abbr title="...">...</abbr>plutôt; les navigateurs stylisent généralement cela souligné par des tirets / points, indiquant "il y a plus à dire, voir mon info-bulle".
— leemes
2
Sur Chrome, l'info-bulle peut mettre quelques secondes à apparaître. Un peu lent à mon avis.
— AndroidDev
293

Cela peut être fait uniquement avec CSS , pas de javascript du tout : exécution de la démo

  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éfinissez le :beforepseudo - élément de chaque [data-tooltip]objet pour qu'il soit transparent, absolument positionné et avec data-tooltip=""valeur comme contenu:

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

  3. Définissez l' :hover:beforeétat de vol stationnaire de chacun [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 lors du survol, mais en dehors du parent, avec un autre attribut personnalisé data-tooltip-persistentet une règle simple:

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

Remarque 1: la couverture du navigateur pour cela est très large, mais envisagez d'utiliser une solution de rechange javascript (si nécessaire) pour les anciens IE.

Remarque 2: une amélioration pourrait être d'ajouter un peu de javascript pour calculer la position de la souris et l'ajouter aux pseudo-éléments, en changeant une classe qui lui est appliquée.

— Andrea Ligios
source
1
@AndreaLigios Cela pourrait-il être changé, de sorte que l'infobulle soit mise à l'échelle à 1x1px lorsqu'elle n'est pas affichée et que le pixel devrait être quelque part à 0,0 coordonnées du texte? Actuellement, il y a un problème dans la démo: lorsque vous placez la souris dans la zone située sous la troisième division de la démo, l'info-bulle commence à apparaître, mais s'éloigne ensuite du pointeur de la souris, et revient donc à sa position de départ, qui trompe à nouveau l'apparition. Cela se produit d'une manière impressionnante et montre un scintillement.
— John
1
Excellente réponse Andrea, la réponse acceptée est obsolète. Le jsfiddle a beaucoup aidé.
— jhhoff02
2
J'aime qu'il y ait deux grandes réponses à cette question. L'un simple et l'autre personnalisable.
— Rohmer
2
C'est génial! Mais: comment ajouter un saut de ligne ici? Il semble ignorer <br>et d'autres comme \nou \rcomme ceux-ci apparaissent simplement en texte brut dans le reste de la chaîne. Mise à jour: je viens de remarquer que la définition d'une largeur maximale permet d'ajuster automatiquement son contenu et de mettre des sauts de ligne. Vraiment bien! (Cependant, si quelqu'un connaît une réponse, je l'apprécierais toujours)
— LinusGeffarth
2
@LinusGeffarth vous pouvez le faire avec un espace blanc: pré-wrap; sur Chrome actuel. Je n'ai cependant pas testé d'autres navigateurs.
— Taugenichts
83

Vous n'avez pas du tout besoin de JavaScript pour cela; il suffit de définir l' titleattribut :

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

Notez que la présentation visuelle de l'info-bulle dépend du navigateur / du système d'exploitation, elle peut donc apparaître en fondu et non. Cependant, c'est la façon sémantique de faire des info-bulles, et cela fonctionnera correctement avec des logiciels d'accessibilité comme les lecteurs d'écran.

Démo dans les extraits de pile

<div title="Hello, World!">
  <label>Name</label>
  <input type="text"/>
</div>
Développer l'extrait

— cdhowie
source
vrai, mais si l'OP veut styliser l'info-bulle d'une certaine manière, alors une implémentation CSS est meilleure
— Yvonne Aburrow
2
@YvonneAburrow Cette réponse n'est pas seulement pour l'OP.
— cdhowie
C'est suffisant. Mais parfois, il faut écrire un essai dans une info-bulle, et dans cette situation, l' titleattribut ne le coupe tout simplement pas.
— Yvonne Aburrow
@YvonneAburrow ... C'est pourquoi il y a plusieurs réponses positives. Si vous avez besoin de quelque chose de simple et rapide, ça titlemarche. Il existe d'autres réponses plus complexes si vous avez besoin de quelque chose de plus complexe. Honnêtement, je ne sais pas quel point vous essayez de faire valoir ici.
— cdhowie
17

Voici une belle info-bulle jQuery:

https://jqueryui.com/tooltip/

Pour implémenter cela, suivez simplement ces étapes:

  1. Ajoutez ce code dans vos <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 avoir l'info-bulle, ajoutez-y simplement un titleattribut. Quel que soit le texte dans l'attribut title, il apparaîtra dans l'info-bulle.

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

— Nathan
source
16

J'ai fait quelque chose qui devrait également 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, consultez mon article:

Un simple texte d'info-bulle formaté au survol

— Narnian
source
8
La question était pour une solution html pas une magie côté serveur .net.
— Michał Šrajer
5
Le code .net est là pour montrer la troncature. L'approche utilisant html et css est toujours valide.
— Mark Swardstrom
1
Il s'agit de la solution la plus simple et la meilleure, car elle ne repose pas sur JS. Rendez simplement span.showonhover focalisable ou déplacez span.hovertext dans le lien et vous êtes entièrement accessible pour les lecteurs d'écran (et donc mieux que la solution title-attribute). Oh, et oubliez <% # ...%>
— chaenu
15

Voici une implémentation CSS 3 pure (avec JS en option)

La seule chose que vous avez à faire est de définir un attribut sur n'importe quel div appelé "info-bulle de données" et ce texte sera affiché à côté lorsque vous survolerez.

J'ai inclus du JavaScript optionnel qui provoquera l'affichage de l'infobulle près du curseur. Si vous n'avez pas besoin de cette fonctionnalité, vous pouvez ignorer en toute sécurité la partie JavaScript de ce violon.

Si vous ne voulez pas le fondu sur l'état de survol, supprimez simplement les propriétés de transition .

Il est conçu comme l' titleinfo-bulle de la 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 en option pour le changement d'emplacement de l'infobulle 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  }'

}
— Steven Linn
source
12

D'accord, voici toutes vos exigences en matière de primes remplies:

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

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

Voici les fonctionnalités que j'ai intégrées à ce violon purement JS, CSS et HTML5:

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

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);
— Anshu Dwibhashi
source
Déplacer rapidement le curseur vers l'intérieur et vers l'extérieur fait apparaître plusieurs info-bulles qui ne disparaîtront pas dans votre jsfiddle.
— Ke Vin
Je me demande si l'infobulle apparaît à la position de la souris. Grande personnalisation.
— Andre Mesquita
5

Vous pouvez créer des info-bulles CSS personnalisées à l'aide d'un attribut de données, de 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;
}
— Clint Brown
source
4

Le moyen le plus simple serait de définir position: relativel'élément contenant et position: absolutel'élément 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>
— designcise
source
4

Vous pouvez utiliser le titre. ça va marcher pour à peu près tout

<div title="Great for making new friends through cooperation.">

<input script=JavaScript type=button title="Click for a compliment" onclick="window.alert('Your hair reminds me of a sunset across a prairie')" value="making you happy">

<table title="Great job working for those who understand the way i feel">

pensez à n'importe quelle balise qui peut être visible dans la fenêtre html et insérez une title="whatever tooltip you'd like"balise à l'intérieur de celle-ci et vous avez obtenu une info-bulle.

— Ronnie Matthews
source
Je ne comprends pas pourquoi vous avez obtenu si peu de votes. J'étais sûr qu'il existe une solution simple, mais les gens ainsi que w3schools proposent des solutions complexes pour une chose aussi simple. Merci.
— schlingel
4

Vous pouvez basculer un div enfant pendant onmouseoveret onmouseoutcomme ceci:

function Tooltip(el, text) {
  el.onmouseover = function() {
    el.innerHTML += '<div class="tooltip">' + text + '</div>' 
    }
  el.onmouseout = function() {
    el.removeChild(el.querySelector(".tooltip"))
  }
}

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

Exemple dans les extraits de pile et jsFiddle

Afficher l'extrait de code

— ProllyGeek
source
3 
<!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 d'infobulle. Veuillez vous référer à ce lien: http://jqueryui.com/tooltip/#custom-style

— sanman
source
3

Une solution uniquement CSS3 pourrait être:

CSS3: 

div[id^="tooltip"]:after {content: attr(data-title); background: #e5e5e5; position: absolute; top: -10px; left:  0; right: 0; z-index: 1000;}

HTML5:

<div style="background: yellow;">
    <div id="tooltip-1" data-title="Tooltip Text" style="display: inline-block; position: relative; background: pink;">
        <label>Name</label>
        <input type="text" />
    </div>
</div>

Vous pouvez ensuite créer un tooltip-2div de la même manière ... vous pouvez bien sûr également utiliser l' titleattribut au lieu de l' dataattribut.

— designcise
source
1
Pourquoi diable utiliseriez-vous un identifiant pour styliser quelque chose dont vous voulez plus d'instances, puis utiliser le [id^=tooltip]sélecteur alors que vous auriez pu utiliser une classe et .tooltip?
— Stephan Muller
Tu as raison. J'ai commencé avec des identifiants, je l'ai donc suivi et je l'ai totalement raté. Mais bon, quelqu'un pourrait en bénéficier. Oh et d'ailleurs, nous pourrions même utiliser un sélecteur d'attribut pour sélectionner "data-title" (par exemple div[data-title])sans avoir à ajouter de balisage supplémentaire.
— designcise
3

Essaye ça. Vous pouvez le faire avec seulement CSS et je n'ai ajouté qu'un data-titleattribut pour l'infobulle.

.tooltip{
  position:relative;
  display: inline-block;
}
.tooltip[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #fff;
  position: absolute;
  left: 0;
  top: 110%;
  white-space: nowrap;  
  border-radius: 5px;  
  background:#000;
}
<div data-title="My tooltip" class="tooltip">
    <label>Name</label>
    <input type="text"/>
</div>
Développer l'extrait

— Ankita Patel
source
3

J'ai développé trois types d'effets de fondu:

/* setup tooltips */
    .tooltip {
      position: relative;
    }
    .tooltip:before,
    .tooltip:after {
      display: block;
      opacity: 0;
      pointer-events: none;
      position: absolute;
    }
    .tooltip:after {
    	border-right: 6px solid transparent;
    	border-bottom: 6px solid rgba(0,0,0,.75); 
      border-left: 6px solid transparent;
      content: '';
      height: 0;
        top: 20px;
        left: 20px;
      width: 0;
    }
    .tooltip:before {
      background: rgba(0,0,0,.75);
      border-radius: 2px;
      color: #fff;
      content: attr(data-title);
      font-size: 14px;
      padding: 6px 10px;
        top: 26px;
      white-space: nowrap;
    }

    /* the animations */
    /* fade */
    .tooltip.fade:after,
    .tooltip.fade:before {
      transform: translate3d(0,-10px,0);
      transition: all .15s ease-in-out;
    }
    .tooltip.fade:hover:after,
    .tooltip.fade:hover:before {
      opacity: 1;
      transform: translate3d(0,0,0);
    }

    /* expand */
    .tooltip.expand:before {
      transform: scale3d(.2,.2,1);
      transition: all .2s ease-in-out;
    }
    .tooltip.expand:after {
      transform: translate3d(0,6px,0);
      transition: all .1s ease-in-out;
    }
    .tooltip.expand:hover:before,
    .tooltip.expand:hover:after {
      opacity: 1;
      transform: scale3d(1,1,1);
    }
    .tooltip.expand:hover:after {
      transition: all .2s .1s ease-in-out;
    }

    /* swing */
    .tooltip.swing:before,
    .tooltip.swing:after {
      transform: translate3d(0,30px,0) rotate3d(0,0,1,60deg);
      transform-origin: 0 0;
      transition: transform .15s ease-in-out, opacity .2s;
    }
    .tooltip.swing:after {
      transform: translate3d(0,60px,0);
      transition: transform .15s ease-in-out, opacity .2s;
    }
    .tooltip.swing:hover:before,
    .tooltip.swing:hover:after {
      opacity: 1;
      transform: translate3d(0,0,0) rotate3d(1,1,1,0deg);
    }

    /* basic styling: has nothing to do with tooltips: */
    h1 {
      padding-left: 50px;
    }
    ul {
      margin-bottom: 40px;
    }
    li {
      cursor: pointer; 
      display: inline-block; 
      padding: 0 10px;
    }
 <h1>FADE</h1>

      <div class="tooltip fade" data-title="Hypertext Markup Language">
      <label>Name</label>
      <input type="text"/>
      </div>
      

    <h1>EXPAND</h1>

      <div class="tooltip expand" data-title="Hypertext Markup Language">
      <label>Name</label>
      <input type="text"/>
      </div>
      

    <h1>SWING</h1>

      <div class="tooltip swing" data-title="Hypertext Markup Language"> 
      <label>Name</label>
      <input type="text"/>
      </div>
Développer l'extrait

— Nims Patel
source
3

Voici une implémentation d'infobulle simple qui tient compte de la position de votre souris ainsi que de la hauteur et de la largeur de votre fenêtre:

function showTooltip(e) {
  var tooltip = e.target.classList.contains("tooltip")
      ? e.target
      : e.target.querySelector(":scope .tooltip");
  tooltip.style.left =
      (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
          ? (e.pageX + 10 + "px")
          : (document.body.clientWidth + 5 - tooltip.clientWidth + "px");
  tooltip.style.top =
      (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
          ? (e.pageY + 10 + "px")
          : (document.body.clientHeight + 5 - tooltip.clientHeight + "px");
}

var tooltips = document.querySelectorAll('.couponcode');
for(var i = 0; i < tooltips.length; i++) {
  tooltips[i].addEventListener('mousemove', showTooltip);
}
.couponcode {
    color: red;
    cursor: pointer;
}

.couponcode:hover .tooltip {
    display: block;
}

.tooltip {
    position: absolute;
    white-space: nowrap;
    display: none;
    background: #ffffcc;
    border: 1px solid black;
    padding: 5px;
    z-index: 1000;
    color: black;
}
Lorem ipsum dolor sit amet, <span class="couponcode">consectetur
adipiscing<span class="tooltip">This is a tooltip</span></span>
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span
class="couponcode">reprehenderit<span class="tooltip">This is
another tooltip</span></span> in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est <span
class="couponcode">laborum<span class="tooltip">This is yet
another tooltip</span></span>.
Développer l'extrait

(voir aussi ce violon )

— John Slegers
source
2

Sans utiliser d'API, vous pouvez aussi faire quelque chose comme ça en utilisant du CSS pur et une démo Jquery

HTML

<div class="pointer_tooltip"> 
    Click & Drag to draw the area
</div>

CSS

.pointer_tooltip{
  width : auto;
  height : auto;
  padding : 10px;
  border-radius : 5px;
  background-color : #fff;
  position: absolute;
}

Jquery

$(document).mousemove(function( event ) {
    var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";   

    //set the actuall width
    $('.pointer_tooltip').width($('.pointer_tooltip').width());
    var position_top = event.pageY+18;
    var position_left = event.pageX-60;          
    var width=$('body').width()-$('.pointer_tooltip').width();

    //check if left not minus
    if(position_left<0){
      position_left=10;
    }else if(position_left > width){
     position_left=width-10;
    }       


    $('.pointer_tooltip').css('top',position_top+'px');
    $('.pointer_tooltip').css('left',position_left+'px');
});
— Amin Kodaganur
source
2

Vous pouvez créer une info-bulle en utilisant du CSS pur.Essayez celui-ci.J'espère qu'il devrait vous aider à résoudre votre problème.

HTML

<div class="tooltip"> Name
    <span class="tooltiptext">Add your tooltip text here.</span>
</div>

CSS

.tooltip {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 270px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 1s;
    }

    .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }
— Faisal
source
2

Info-bulles Position pure css

      div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%); /* IE 9 */
        -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	
							
        text-align: center;
      }  					
	
      .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
      }

      .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        //text-align: center;
        border-radius: 6px;
        padding: 5px 0;

        /* Position the tooltip */
        position: absolute;
        z-index: 1;
      }

      .tooltip:hover .tooltiptext {
        visibility: visible;
      }		
					
      .toolLeft {
        top: -5px;
        right: 105%;
      }					
					
      .toolRight {
        top: -5px;
        left: 105%;
      }
					
      .toolTop {
        bottom: 100%;
        left: 50%;
        margin-left: -60px;
      }
					
      .toolBottom {
        top: 100%;
        left: 50%;
        margin-left: -60px;
      }
    <div>
			
      <div class="tooltip">Top <span class="tooltiptext toolTop">Tooltip text</span></div><br />
      <div class="tooltip">Left  <span class="tooltiptext toolLeft">Tooltip text</span></div><br />			
      <div class="tooltip">Right <span class="tooltiptext toolRight">Tooltip text</span></div><br />
      <div class="tooltip">Bottom  <span class="tooltiptext toolBottom">Tooltip text</span></div><br />			
			
    </div>
Développer l'extrait

— antelove
source
2

vous pouvez le faire avec un simple css ... jsfiddle ici vous pouvez voir l'exemple

ci-dessous le code CSS pour l'infobulle

[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
— satyajit déroute
source
2

Azle a une belle implémentation. Supposons que mon élément cible soit une icône, avec le nom de classe "my_icon". Cibler simplement l'élément à l'aide de lafonction add_tooltip d'Azle:

az.add_tooltip('my_icon', 1, {
    "this_class" : "my_tooltip",
    "text" : "HELLO THERE!"
})

entrez la description de l'image ici

Vous pouvez contrôler la position et le style de l'infobulle à l'aide du style CSS habituel . L'infobulle ci-dessus est conçue comme suit:

az.style_tooltip('my_tooltip', 1, {
    "background" : "black",
    "margin-left" : "10px",
    "color" : "hotpink",
    "font-weight" : "bold",
    "font-family" : "Arial",
    "padding" : "10px",
    "border-radius" : "10px"
})

Nous pouvons également ajouter une image à l'infobulle, en spécifiant un "chemin_image":

az.add_tooltip('my_icon', 1, {
    "this_class" : "my_tooltip",
    "text" : "HELLO THERE!",
    "image_path" : "https://cdn-images-1.medium.com/max/1874/1*toepgVwopga9TYFpSkSxXw.png",
    "image_class" : "my_image"
})

entrez la description de l'image ici

Puisque nous avons spécifié une "image_class" ci-dessus, nous pouvons styliser l'image en utilisant la même fonction style_tooltip, en ciblant cette fois l'image. L'image de jeu ci-dessus a été conçue comme suit:

az.style_tooltip('my_image', 1, {
    "width" : "50px",
    "align" : "center"
})

Voici un exemple utilisant une image plus grande :

entrez la description de l'image ici

... ajouté et stylisé comme suit:

az.add_tooltip('my_icon', 1, {
    "this_class" : "my_tooltip",
    "text" : "MORE INFO<br><br>",
    "image_path" : "https://i0.wp.com/proactive.ie/wp-content/uploads/2017/11/Infographic.jpg?resize=1240%2C1062&ssl=1",
    "image_class" : "my_image"
})

az.style_tooltip('my_image', 1, {
    "width" : "500px"
})

Voici un GIST de tout le code.

Vous pouvez jouer dans ce FIDDLE .

— Cybernétique
source
1

Il y a beaucoup de réponses à cette question mais peut-être que cela aidera quelqu'un. C'est pour toutes les positions gauche, droite, haut, bas.

Voici le css:

    .m-tb-5 {
        margin-top: 2px;
        margin-bottom: 2px;
    }
    [data-tooltip] {
        display: inline-block;
        position: relative;
        cursor: help;
        padding: 3px;
    }
    /* Tooltip styling */
    [data-tooltip]:before {
        content: attr(data-tooltip);
        display: none;
        position: absolute;
        background: #000;
        color: #fff;
        padding: 3px 6px;
        font-size: 10px;
        line-height: 1.4;
        min-width: 100px;
        text-align: center;
        border-radius: 4px;
    }
    /* Dynamic horizontal centering */
    [data-tooltip-position="top"]:before,
    [data-tooltip-position="bottom"]:before {
        left: 50%;
        -ms-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    /* Dynamic vertical centering */
    [data-tooltip-position="right"]:before,
    [data-tooltip-position="left"]:before {
        top: 50%;
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    [data-tooltip-position="top"]:before {
        bottom: 100%;
        margin-bottom: 6px;
    }
    [data-tooltip-position="right"]:before {
        left: 100%;
        margin-left: 6px;
    }
    [data-tooltip-position="bottom"]:before {
        top: 100%;
        margin-top: 6px;
    }
    [data-tooltip-position="left"]:before {
        right: 100%;
        margin-right: 6px;
    }

    /* Tooltip arrow styling/placement */
    [data-tooltip]:after {
        content: '';
        display: none;
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
    }
    /* Dynamic horizontal centering for the tooltip */
    [data-tooltip-position="top"]:after,
    [data-tooltip-position="bottom"]:after {
        left: 50%;
        margin-left: -6px;
    }
    /* Dynamic vertical centering for the tooltip */
    [data-tooltip-position="right"]:after,
    [data-tooltip-position="left"]:after {
        top: 50%;
        margin-top: -6px;
    }
    [data-tooltip-position="top"]:after {
        bottom: 100%;
        border-width: 6px 6px 0;
        border-top-color: #000;
    }
    [data-tooltip-position="right"]:after {
        left: 100%;
        border-width: 6px 6px 6px 0;
        border-right-color: #000;
    }

    [data-tooltip-position="left"]:after {
        right: 100%;
        border-width: 6px 0 6px 6px;
        border-left-color: #000;
    }
    /* Show the tooltip when hovering */
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after {
        display: block;
        z-index: 50;
    }

Et la balise HTML peut être comme ceci:

<p data-tooltip-position="right" data-tooltip="Some tooltip text here" title="">Text Here</p>

<p data-tooltip-position="left" data-tooltip="Some tooltip text here" title="">Text Here</p>

<p data-tooltip-position="top" data-tooltip="Some tooltip text here" title="">Text Here</p>

<p data-tooltip-position="bottom" data-tooltip="Some tooltip text here" title="">Text Here</p>

— MJ
source
1

Vous pouvez essayer les info-bulles d'amorçage.

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

lire ici

— 1inMillion
source
1

vous pouvez également l'utiliser comme info-bulle ... Cela fonctionne de la même façon mais vous devez écrire une balise supplémentaire c'est tout.

<abbr title="THis is tooltip"></abbr>
1

Et ma version

.tooltip{
display: inline;
position: relative; /** very important set to relative*/
}

.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title); /**extract the content from the title */
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}

.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}

Puis le HTML

<div title="This is some information for our tooltip." class="tooltip">bar </div>
— Olubodun Agbalaya
source
0

Ajouter une info-bulle à un div

<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Information</span>
</div>
— Love Kumar
source
Ceci a été copié-collé de w3schools.com/css/css_tooltip.asp
— Mark Kortink
-1 
<div title="tooltip text..">
    Your Text....
</div>

La façon la plus simple d'ajouter une info-bulle à votre élément div.

— Kartik Arora
source
3
Désolé, Kartik, la même chose a été dite dans plusieurs réponses et commentaires. Votre contribution n'ajoute rien :(
— brasofilo
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.