Tooltip/Popover following the mouse pointer

Here is an HTML/CSS/JS module I created which displays tooltip/popover with custom HTML tags on hover following and moving with the mouse pointer. I am sure you will like this one 🙂 Do experiment with this one and let me know your version.

---

Demo

Open demo in a full window – https://demos.webdevpuneet.com/set1/popover-following-mouse-pointer/index.html

HTML

<table cellspacing="0px">
<tr>
  <tr>
	<td class="popover-item">
	  Cell 1
	  <div class="popover-content">
		<h1>Cell 1 - Tooltip/Popover</h1>
		<p>This is a Tooltip/Popover following the mouse pointer on hover</p>
	  </div>
	</td>
	<td class="popover-item">
	  Cell 2
	  <div class="popover-content">
		<h1>Cell 2 - Tooltip/Popover</h1>
		<p>This is a Tooltip/Popover following the mouse pointer on hover</p>
	  </div>
	</td>
	<td class="popover-item">
	  Cell 3
	  <div class="popover-content">
		<h1>Cell 3 - Tooltip/Popover</h1>
		<p>This is a Tooltip/Popover following the mouse pointer on hover</p>
	  </div>
	</td>
  </tr>
</tr>
<tr>
  <tr>
	<td colspan="3" class="popover-item">
	  Cell 4
	  <div class="popover-content">
		<h1>Cell 4 - Tooltip/Popover</h1>
		<p>This is a Tooltip/Popover following the mouse pointer on hover</p>
	  </div>
	</td>
  </tr>
</tr>
<tr>
  <tr>
	<td class="popover-item">
	  Cell 5
	  <div class="popover-content">
		<h1>Cell 5 - Tooltip/Popover</h1>
		<p>This is a Tooltip/Popover following the mouse pointer on hover</p>
	  </div>
	</td>
	<td class="popover-item">
	  Cell 6
	  <div class="popover-content">
		<h1>Cell 6 - Tooltip/Popover</h1>
		<p>This is a Tooltip/Popover following the mouse pointer on hover</p>
	  </div>
	</td>
	<td rowspan="5" class="popover-item">
	  Cell 7
	  <div class="popover-content">
		<h1>Cell 7 - Tooltip/Popover</h1>
		<p>This is a Tooltip/Popover following the mouse pointer on hover</p>
	  </div>
	</td>
  </tr>
</tr>
<tr>
  <tr>
	<td class="popover-item">
	  Cell 8
	  <div class="popover-content">
		<h1>Cell 8 - Tooltip/Popover</h1>
		<p>This is a Tooltip/Popover following the mouse pointer on hover</p>
	  </div>
	</td>
	<td class="popover-item">
	  Cell 9
	  <div class="popover-content">
		<h1>Cell 9 - Tooltip/Popover</h1>
		<p>This is a Tooltip/Popover following the mouse pointer on hover</p>
	  </div>
	</td>

  </tr>
</tr>
<tr>
  <tr>
	<td class="popover-item">
	  Cell 10
	  <div class="popover-content">
		<h1>Cell 10 - Tooltip/Popover</h1>
		<p>This is a Tooltip/Popover following the mouse pointer on hover</p>
	  </div>
	</td>
	<td class="popover-item">
	  Cell 11
	  <div class="popover-content">
		<h1>Cell 11 - Tooltip/Popover</h1>
		<p>This is a Tooltip/Popover following the mouse pointer on hover</p>
	  </div>
	</td>
  </tr>
</tr>
</table>

---

CSS

table{
  width:100%;
  cell-spacing:0px;
}
td{
  border:1px solid;
  padding:10px;
  cell-spacing:0px;
  cell-padding:0px;
}
.popover-item{
  position: relative;
}
.popover-content{
  display:none;
  position: absolute;
  left: 105%;
  display: none;
  font-size: 1.2rem;
  background-color: rgba(230, 230, 230, 1);
  padding: 10px 20px;
  border-radius: 16px;
  font-family: Tahoma, Verdana, Segoe, sans-serif;
  font-weight: normal;
  z-index:111;
  width:300px;
}
.popover-content:hover{
  display:none!important;
}
.popover-item:hover .popover-content{
  display: block;
}
.popover-content h1{
  font-size:20px;
}

---

JavaScript

/* Script for popover positioning */
(function(selector, horizontalOffset, verticalOffset) {
  var items;

  selector = selector || '.popover-item';
  horizontalOffset = horizontalOffset || 5;
  verticalOffset = verticalOffset || 5;

  items = document.querySelectorAll(selector);
  items = Array.prototype.slice.call(items);

  items.forEach(function(item) {
	// Every time the pointer moves over the element the
	//  CSS-rule in overwritten with new values for
	//  top and left.
	item.addEventListener('mousemove', function(e) {
	  let countCssRules = document.styleSheets[0].cssRules.length;
	  var rightSpace = document.body.clientWidth - e.pageX;
	  if( rightSpace > 300 ){
		var newRule = selector +
		':hover .popover-content {  ' +
					   'right:auto; left: ' + (horizontalOffset + e.offsetX) + 'px; ' +
					   'top: ' +  (e.offsetY + verticalOffset) + 'px; }';
	  }else{
		 var newRule = selector +
		':hover .popover-content {  ' +
					   'left:auto; right: ' + (item.offsetWidth - e.offsetX) + 'px; ' +
					   'top: ' +  (e.offsetY + verticalOffset) + 'px; }';
	  }


	  document.styleSheets[0].insertRule(newRule, countCssRules);
	});
  });
})('.popover-item', 10, 5);