Html-Tooltip Position Relative to Mouse Pointer

HTML-Tooltip position relative to mouse pointer

For default tooltip behavior simply add the title attribute. This can't contain images though.

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

Before you clarified the question I did this up in pure JavaScript, hope you find it useful. The image will pop up and follow the mouse.

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

Extending for multiple elements

One solution for multiple elements is to update all tooltip span's and setting them under the cursor on mouse move.

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

How to positioning the tooltip above cursor

First set position of the anchor tag to relative to set that as a reference point for absolute positioned children.

Then use the following CSS declaration:

a.tooltip span {
    z-index:10;
    display:none;
    padding:14px 20px;
    width:220px;
    line-height:17px;
}

a.tooltip:hover span {
  display:block;
  position:absolute;
  bottom: 2em;       /* Use a relative unit to increase the capability */
  left: 0;
  color:#373535;
  border:2px solid #D3D3D3;
  background:#fffFff;
}

JSBin Demo

Update

If you want to display the tooltip box at top center, set the left property to 50% then transform: translateX(-50%):

a.tooltip:hover span {
  /* ... */
  left: 50%;
  -webkit-transform: translateX(-50%);
}

Updated Demo

Angular tooltip directive relative to mouse position

Scalable solution:

tooltipable.component.html - this component is wrapper which expects the child to be divided into two sections:

• tooltip - section conditionally displayed (onMouseEnter)
• body - normal section (always displayed)

<app-tooltip [display]="this.display" [x]="this.x" [y]="this.y">
  <ng-content select="[tooltip]"></ng-content>
</app-tooltip>

<ng-content select="[body]"></ng-content>

tooltip.component.html - this is a container for data to be displayed in the tooltip

<div class="tooltip"
  [style.display]="this.display ? 'block' : 'none'"
  [style.top]="y + 'px'"
  [style.left]="x + 'px'"
>
    <ng-content></ng-content>
</div>

some.component.html

<app-tooltipable>
   <div tooltip>Hello tooltip!</div>
   <div body>Hello world!</div>
</app-tooltipable>

how to make tooltip follow cursor

I don't know anything about qtip as a library, but first I'd check to see if they have any options to pass in to achieve this behavior. Even if they do, it's good to know how things work anyways!

To do it manually, you'd use CSS to give your tooltip element position: fixed; and then use javascript to get the x and y coordinates of your mouse, updating the left and top CSS attributes every time the mouse moves.

Here is an example!

$( document ).on( "mousemove", function( event ) {  $( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );  $( ".tooltip" ).css({    "left" : event.pageX,    "top" : event.pageY  });});

.tooltip {display: inline-block;position: fixed;padding: .5em 1em;background-color: #f1f1f1;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><h4 id="log">pageX: -, pageY: -</h4><div class="tooltip">I'm a tooltip!</div>

$(function() {  $(document).tooltip({    open: function(e, ui) {      ui.tooltip.position({        my: 'left top',        at: 'right+15 center',        of: e      });    }  });});

label {  display: inline-block;  width: 5em;}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p><p>But as it's not a native tooltip, it can be styled. Any themes built with  <a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a> will also style tooltips accordingly.</p><p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p><p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p><p>Hover the field to see the tooltip.</p>

// set the dimensions and margins of the graphvar margin = {top: 30, right: 30, bottom: 30, left: 30},  width = 450 - margin.left - margin.right,  height = 450 - margin.top - margin.bottom;
// append the svg object to the body of the pagevar svg = d3.select("#my_dataviz").append("svg")  .attr("width", width + margin.left + margin.right)  .attr("height", height + margin.top + margin.bottom).append("g")  .attr("transform",        "translate(" + margin.left + "," + margin.top + ")");
// Labels of row and columnsvar myGroups = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]var myVars = ["v1", "v2", "v3", "v4", "v5", "v6", "v7", "v8", "v9", "v10"]
// Build X scales and axis:var x = d3.scaleBand()  .range([ 0, width ])  .domain(myGroups)  .padding(0.01);svg.append("g")  .attr("transform", "translate(0," + height + ")")  .call(d3.axisBottom(x))
// Build X scales and axis:var y = d3.scaleBand()  .range([ height, 0 ])  .domain(myVars)  .padding(0.01);svg.append("g")  .call(d3.axisLeft(y));
// Build color scalevar myColor = d3.scaleLinear()  .range(["white", "#69b3a2"])  .domain([1,100])
//Read the datad3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv", function(data) {
  // create a tooltip  var tooltip = d3.select("#my_dataviz")    .append("div")    .style("opacity", 0)    .attr("class", "tooltip")    .style("background-color", "white")    .style("border", "solid")    .style("border-width", "2px")    .style("border-radius", "5px")    .style("padding", "5px")
  // Three function that change the tooltip when user hover / move / leave a cell  var mouseover = function(d) {    tooltip.style("opacity", 1)  }  var mousemove = function(d) {    tooltip      .html("The exact value of<br>this cell is: " + d.value)      .style("left", (d3.mouse(this)[0]+70) + "px")      .style("top", (d3.mouse(this)[1]) + "px")  }  var mouseleave = function(d) {    tooltip.style("opacity", 0)  }
  // add the squares  svg.selectAll()    .data(data, function(d) {return d.group+':'+d.variable;})    .enter()    .append("rect")      .attr("x", function(d) { return x(d.group) })      .attr("y", function(d) { return y(d.variable) })      .attr("width", x.bandwidth() )      .attr("height", y.bandwidth() )      .style("fill", function(d) { return myColor(d.value)} )    .on("mouseover", mouseover)    .on("mousemove", mousemove)    .on("mouseleave", mouseleave)})

<!DOCTYPE html><meta charset="utf-8">
<!-- Load d3.js --><script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place --><div id="my_dataviz"></div>