<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
}
#tooltip {
display:none;
}
</style>
</head>
<body>
<div id="hover" onmouseover="mouseOver()" onmouseout="mouseOut()">HoverOnMe</div
<span id="tooltip">
<p>heya</p>
</span>
<script id="jsbin-javascript">
var tooltip = document.getElementById('tooltip');
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
tooltip.style.top = (y + 20) + 'px';
tooltip.style.left = (x + 20) + 'px';
};
var hover = document.GetElementById("hover");
function mouseOver() {
document.getElementById("tooltip").style.display = "block";
}
function mouseOut() {
document.getElementById("tooltip").style.display = "none";
}
<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.tooltip span p {
text-align: centre;
}
.tooltip {
text-decoration:none;
position:relative;
}
.tooltip span {
text-align: centre;
width: 130px;
display:none;
background-color: tomato;
padding: 10px;
border-radius: 10px;
}
.tooltip:hover span {
display:block;
position:fixed;
overflow:hidden;
}
</style>
</head>
<body>
<br><br><br><br><br><br><br><br><br>
<div>Hover me</div>
<a class="tooltip">this is a thing
<span id="tooltip-span">
<p id="tooltipText">This is the tooltip</p>
</span>
</a>
<a class="tooltip">this is axzcng
<span id="tooltip-span">
<p id="tooltipText">This is the tooltip</p>
</span>
</a>
<script id="jsbin-javascript">
var tooltip = document.getElementById('tooltip');
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
tooltip.style.top = (y + 20) + 'px';
tooltip.style.left = (x + 20) + 'px';
};
var hover = document.GetElementById("hover");
function mouseOver() {
document.getElementById("tooltip").style.display = "block";
}
function mouseOut() {
document.getElementById("tooltip").style.display = "none";
}
No comments:
Post a Comment