web-dev-qa-db-fra.com

Position de l'info-bulle HTML par rapport au pointeur de la souris

Comment aligner l'info-bulle sur le style naturel: bas à droite du pointeur de la souris?

<!DOCTYPE html>
<html>
<head>
  <title>Tooltip with Image</title>
  <meta charset="UTF-8">
  <style type="text/css">
    .tooltip {
        text-decoration:none;
        position:relative;
    }
     .tooltip span {
        display:none;
    }
     .tooltip span img {
        float:left;
    }
     .tooltip:hover span {
        display:block;
        position:absolute;
        overflow:hidden;
    }
  </style>
</head>
<body>
  <a class="tooltip" href="http://www.google.com/">
    Google
    <span>
      <img alt="" src="http://www.google.com/images/srpr/logo4w.png">
    </span>
  </a>
</body>
</html>
cssalignmenttooltip
48
Ben

Pour le comportement des info-bulles par défaut, ajoutez simplement l’attribut title. Cela ne peut pas contenir d'images cependant.

<div title="regular tooltip">Hover me</div>

Avant de clarifier la question, je l’ai faite en JavaScript pur, espérons que vous la trouverez utile. L'image apparaîtra et suivra la souris.

jsFiddle

JavaScript 

var tooltipSpan = document.getElementById('tooltip-span');

window.onmousemove = function (e) {
    var x = e.clientX,
        y = e.clientY;
    tooltipSpan.style.top = (y + 20) + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';
};

[~ # ~] css [~ # ~] 

.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

Extension pour plusieurs éléments

Une solution pour plusieurs éléments consiste à mettre à jour toutes les info-bulles span et à les placer sous le curseur lors du déplacement de la souris.

jsFiddle

var tooltips = document.querySelectorAll('.tooltip span');

window.onmousemove = function (e) {
    var x = (e.clientX + 20) + 'px',
        y = (e.clientY + 20) + 'px';
    for (var i = 0; i < tooltips.length; i++) {
        tooltips[i].style.top = y;
        tooltips[i].style.left = x;
    }
};
84
Daniel Imms

Une façon de faire cela sans JS consiste à utiliser l'action de survol pour révéler un élément HTML qui est par ailleurs caché. Voir le code ci-dessous:

http://codepen.io/c0un7z3r0/pen/LZWXEw

Notez que l'étendue qui contient le contenu de l'info-bulle est relative au li parent. La magie est là:

ul#list_of_thrones li > span{
  display:none;
}
ul#list_of_thrones li:hover > span{
  position: absolute;
  display:block;
  ...
}

Comme vous pouvez le constater, la plage est masquée, sauf si l'élément de liste est survolé, révélant ainsi l'élément span, la plage peut contenir autant de code HTML que nécessaire. Dans le code ci-joint, j’ai également utilisé l’élément a: after pour la flèche, mais c’est bien entendu tout à fait facultatif et n’a été inclus dans cet exemple qu’à des fins esthétiques.

J'espère que cela aide, je me suis senti obligé de poster car toutes les autres réponses incluaient des solutions JS mais le PO a demandé une solution uniquement HTML/CSS.

10
Anthony Cregan

Vous pouvez utiliser le plugin jQuery UI, en suivant les URL de référence

Définissez la piste sur VRAI pour la position de l’info-bulle par rapport au pointeur de la souris, par exemple.

$('.tooltip').tooltip({ track: true });
7
Atul Bhosale

Je préfère cette technique:

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>.

(voir aussi ce violon )

6
John Slegers

Nous pouvons réaliser la même chose en utilisant "Directive" dans Angularjs.

            //Bind mousemove event to the element which will show tooltip
            $("#tooltip").mousemove(function(e) {
                //find X & Y coodrinates
                x = e.clientX,
                y = e.clientY;

                //Set tooltip position according to mouse position
                tooltipSpan.style.top = (y + 20) + 'px';
                tooltipSpan.style.left = (x + 20) + 'px';
            });

Vous pouvez consulter ce post pour plus de détails. http://www.ufthelp.com/2014/12/Tooltip-Directive-AngularJS.html

3
AugustRush