[Tooltip] Simple tooltip via JQuery #js
.section {
&__tooltip {
border-bottom: 1/@em dashed blue;
color: blue;
&:hover {
cursor: help;
}
}
&__is-tooltip-visible {
position: absolute;
display: none;
padding: 1em;
width: 320px;
border-radius: 3px;
background-color: #fff;
box-shadow: rgb(102, 102, 102) 0 0 4.8px 0;
}
}
$(document).ready(function() {
var toolTip = ".section__tooltip";
var tVisible = "section__is-tooltip-visible";
$(toolTip)
.hover(
function() {
var title = $(this).attr("title");
$(this)
.data("tipText", title)
.removeAttr("title");
$("<p class=" + tVisible + "></p>")
.text(title)
.appendTo("body")
.fadeIn(300);
},
function() {
$(this).attr("title", $(this).data("tipText"));
$("." + tVisible).remove();
}
)
.mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$("." + tVisible).css({ top: mousey, left: mousex });
});
});