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);
You must be logged in to post a comment.