html Tooltip_left_arrow&right_arrow
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Tooltip_left_arrow&right_arrow相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
/* Lefttooltip */
<style>
a.event , a.banner {
position: relative;
display: inline-block;
}
a.event .leftTooltip , a.banner .leftTooltip {display: none}
a.event:hover .leftTooltip,
a.banner:hover .leftTooltip
{
width:200px;
padding:10px;
margin-right: 5px;
font-size:12px;
background-color:#fff;
border:2px solid #999;
border-radius:4px;
position: absolute;
display:inline-block;
z-index: 1;
/* top: -50px; */
right:100%;
}
/* arrow */
a.event .leftTooltip::before,
a.event .leftTooltip::after,
a.banner .leftTooltip::before,
a.banner .leftTooltip::after
{
position: absolute;
top: 50%;
right: -5px;
margin-top: -5px;
content: '';
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid #fff;
}
a.event .leftTooltip::before,
a.banner .leftTooltip::before
{
border-left-color: #999;
right: -9px;
}
/* Righttooltip */
a.event a.banner {
position: relative;
display: inline-block;
}
a.event .rightTooltip,
a.banner .rightTooltip
{display: none}
a.event:hover .rightTooltip,
a.banner:hover .rightTooltip
{
width:200px;
padding:10px;
margin-left: 5px;
font-size:12px;
background-color:#fff;
border:2px solid #999;
border-radius:4px;
position: absolute;
display:inline-block;
z-index: 1;
/*top: -50px; comment it out. according to the height of the content of tootip, to change the position of the arrow dynamically */
left:100%; /* the position of the lefe side relative to the parent element*/
}
/* arrow */
a.event .rightTooltip::before,
a.event .rightTooltip::after,
a.banner .rightTooltip::before,
a.banner .rightTooltip::after
{
position: absolute;
top: 50%;
left: -5px;
margin-top: -5px;
content: '';
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 8px solid #fff;
}
a.event .rightTooltip::before,
a.banner .rightTooltip::before
{
border-right-color: #999;
left: -9px;
}
</style>
<script>
// get the coordinates of the <a> element
function getOffset(el) {
rect = el.getBoundingClientRect();
return {
left: rect.left + window.scrollX,
right: rect.right + window.scrollX,
top: rect.top + window.scrollY
}
}
// Depending on the position of the <a> on the entire body page, changing the direction of the arrow
function updateHoverArrow(bT) {
var leftCoordinate = getOffset(bT).left;
if( leftCoordinate < 20)
{
bT.firstChild.classList.remove("bottomTooltip");
bT.firstChild.classList.add("rightTooltip");
var height_str = bT.firstChild.clientHeight;
var height_int = parseInt(height_str,10);
var height_half = height_int/2 - 5;
var height_half_str = height_half.toString();
bT.firstChild.style.top = "-"+height_half_str+"px";
}
if( leftCoordinate > 1100)
{
bT.firstChild.classList.remove("bottomTooltip");
bT.firstChild.classList.add("leftTooltip");
var height_str = bT.firstChild.clientHeight;
var height_int = parseInt(height_str,10);
var height_half = height_int/2 - 5;
var height_half_str = height_half.toString();
bT.firstChild.style.top = "-"+height_half_str+"px";
//alert(bT.firstChild.tagName+" "+bT.firstChild.className);
}
}
</script>
<body >
<a href="#" class="event">
<span class="leftTooltip"> context of the tooltips</span>
</a>
<a href="#" class="banner">
<span class="leftTooltip"> context of the tooltips</span>
</a>
</body>
</html>
以上是关于html Tooltip_left_arrow&right_arrow的主要内容，如果未能解决你的问题，请参考以下文章