<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
body {
height: 2000px;
/* the tooltip should work after page scroll too */
}
.tooltip {
position: fixed;
z-index: 100;
padding: 10px 20px;
border: 1px solid #b3c9ce;
border-radius: 4px;
text-align: center;
font: italic 14px/1.3 sans-serif;
color: #333;
background: #fff;
box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
}
#house {
margin-top: 50px;
width: 400px;
border: 1px solid brown;
}
#roof {
width: 0;
height: 0;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 20px solid brown;
margin-top: -20px;
}
p {
text-align: justify;
margin: 10px 3px;
}
</style>
</head>
<body>
<div data-tooltip="Here is the house interior" id="house">
<div data-tooltip="Here is the html" id="roof"></div>
<p>Once upon a time there was a mother pig who had three little pigs.</p>
<p>The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."
<p>The three little pigs set off. "We will take care that the wolf does not catch us," they said.</p>
<p>Soon they met a man. <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…HTML">Hover over me</a></p>
</div>
<script>
let tooltip;
document.onmouseover = function(event) {
let anchorElem = event.target.closest('[data-tooltip]');
if (!anchorElem) return;
//if nothing be anchored, return
tooltip = showTooltip(anchorElem, anchorElem.dataset.tooltip);
}
document.onmouseout = function(){
if(tooltip){
tooltip.remove();
tooltip = false;
}
}
function showTooltip(anchorElem, html){
let tooltipElem = document.createElement('div');
tooltipElem.className = 'tooltip';
/*<div class = tooltip>html</div>*/
tooltipElem.innerHTML = html;
//selecting class, ?
document.body.append(tooltipElem);
let coords = anchorElem.getBoundingClientRect();
let left = coords.left + (anchorElem.offsetWidth - tooltipElem.offsetWidth) / 2;
if (left < 0) left - 0;
let top = coords.top - tooltipElem.offsetHeight - 5;
if (top < 0) {
top = coords.top + anchorElem.offsetHeight + 5;
}
tooltipElem.style.left = left + 'px';
tooltipElem.style.top = top + 'px';
return tooltipElem;
}
</script>
</body>
</html>
/*머리 쪼개진다시발*/
<html>
<head>
<meta charset="utf-8">
<style>
body {
height: 2000px;
/* the tooltip should work after page scroll too */
}
.tooltip {
position: fixed;
z-index: 100;
padding: 10px 20px;
border: 1px solid #b3c9ce;
border-radius: 4px;
text-align: center;
font: italic 14px/1.3 sans-serif;
color: #333;
background: #fff;
box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
}
#house {
margin-top: 50px;
width: 400px;
border: 1px solid brown;
}
#roof {
width: 0;
height: 0;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 20px solid brown;
margin-top: -20px;
}
p {
text-align: justify;
margin: 10px 3px;
}
</style>
</head>
<body>
<div data-tooltip="Here is the house interior" id="house">
<div data-tooltip="Here is the html" id="roof"></div>
<p>Once upon a time there was a mother pig who had three little pigs.</p>
<p>The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."
<p>The three little pigs set off. "We will take care that the wolf does not catch us," they said.</p>
<p>Soon they met a man. <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…HTML">Hover over me</a></p>
</div>
<script>
let tooltip;
document.onmouseover = function(event) {
let anchorElem = event.target.closest('[data-tooltip]');
if (!anchorElem) return;
//if nothing be anchored, return
tooltip = showTooltip(anchorElem, anchorElem.dataset.tooltip);
}
document.onmouseout = function(){
if(tooltip){
tooltip.remove();
tooltip = false;
}
}
function showTooltip(anchorElem, html){
let tooltipElem = document.createElement('div');
tooltipElem.className = 'tooltip';
/*<div class = tooltip>html</div>*/
tooltipElem.innerHTML = html;
//selecting class, ?
document.body.append(tooltipElem);
let coords = anchorElem.getBoundingClientRect();
let left = coords.left + (anchorElem.offsetWidth - tooltipElem.offsetWidth) / 2;
if (left < 0) left - 0;
let top = coords.top - tooltipElem.offsetHeight - 5;
if (top < 0) {
top = coords.top + anchorElem.offsetHeight + 5;
}
tooltipElem.style.left = left + 'px';
tooltipElem.style.top = top + 'px';
return tooltipElem;
}
</script>
</body>
</html>
/*머리 쪼개진다시발*/
댓글
댓글 쓰기