One of my requirements is to display the click percentage for each link in an HTML template that is dynamically fetched from a database. I attempted to show the click percentage for each anchor link by adding them to the `data-title` attribute using jQuery, but encountered an issue where the tooltip would display out of range when hovering over the link. Can anyone assist me in showing the tooltip only when I hover near the anchor link? Or provide a better solution? I have included all sample code in the fiddle link below. Please refer to the sample fiddle and code.
$(document).ready(function() {
var anchors = [];
$(this).find("a").each(function() {
anchors.push($(this));
});
for (i = 0; i < anchors.length; i++) {
var _ele = '100%'
$(anchors[i]).attr('data-title', _ele);
}
});a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[data-title]:hover:before {
width: 55px;
content: attr(data-title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eeeeee), color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="1024" align="center" cellpadding="0" cellspacing="0" border="0" class="wrapper">
<tbody>
...
<table width="25%" align="left" cellpadding="0" cellspacing="0" border="0" class="series">
<tbody>
...
</tbody>
</table>
</td>
</tr>
</tbody>
</table>