Charleswang8711
8/6/2018 - 5:25 AM

Tooltip_left_arrow& right_arrow

left
content_copyfile_download
<!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);
	}
	
	 function initHeightRightTips(bT) {
            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";
        }



        function updateHoverArrow(bT) {
            var CalElement = document.getElementById("Calendar");
            var rightCoorCal = getOffset(CalElement).right;

            initHeightRightTips(bT);
            var leftCoordinate = getOffset(bT).left;

            if (leftCoordinate > 700) {
                bT.firstChild.classList.remove("rightTooltip");
                bT.firstChild.classList.add("leftTooltip");
            }
        }

	
}

</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>