Widget:Tooltip

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>

<style> .marker .tooltip .showing { display: block; } .marker .no-hover {

   display:block;
   position:fixed;
   overflow:hidden;
   background: rgba(33,33,33,1);
   border-radius:5px;
   border: 2px solid #8b4513;
   padding: 5px 8px;
   color: white;
   font-family: sans-serif;
   font-size: 14px;
   max-width: 400px;
   white-space:pre-line;

}

.marker:not(.no-hover):hover .tooltip {

   display:block;
   position:fixed;
   overflow:hidden;
   background: rgba(33,33,33,1);
   border-radius:5px;
   border: 2px solid #8b4513;
   padding: 5px 8px;
   color: white;
   font-family: sans-serif;
   font-size: 14px;
   max-width: 400px;
   white-space:pre-line;

}

.marker {

color: #f4f26b;

}

.marker:hover{

 color:#c3c155;
 cursor:default;

}

.marker .tooltip {

 display:none;

} </style>

<script> isClicked = false; var tooltipSpan = document.getElementsByClassName('tooltip');

$(".marker").click(function() { if(isClicked == false){ isClicked = true;

$('.marker').not(this).each(function(){
        $(this).addClass("no-hover");
    });

$(this).children(".tooltip").addClass("showing"); } else { isClicked = false; $('.marker').not(this).each(function(){

        $(this).removeClass("no-hover");
    });

$(this).children(".tooltip").removeClass("showing"); } });

function move(e) { if(isClicked == false){

   var x = e.clientX,
       y = e.clientY;

   var xoffset = 0;
   if(screen.width - e.clientX < 550){
   xoffset = -350;
   }
   
   var yoffset = 0;
   if(screen.height - e.clientY < 250){
   yoffset = -120;
   }

   for (var i = 0; i < tooltipSpan.length; i++) {
   tooltipSpan[i].style.top = (y + 20 + yoffset) + 'px';
   tooltipSpan[i].style.left = (x + 2 + xoffset) + 'px';
   }

} }

</script>