Widget:Tooltip

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

<style>

.marker:hover .tooltip, .hovered .tooltip {

   display:block;
   position:fixed;
   overflow:auto;
   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;
   max-height: 400px;
   white-space:pre-line;
   z-index: 200;

}

.marker {

color: #f4f26b;

}

.marker:hover{

 color:#c3c155;
 cursor:default;

}

.marker .tooltip {

 display:none;

}

@media screen and (max-device-width: 768px) {

.hovered .tooltip {
   display:block;
   position:fixed;
   overflow:auto;
   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;
   max-height: 400px;
   white-space:pre-line;
   z-index: 200;

} } </style>

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

$(".marker").click(function(evt) { if(!$(this).hasClass("hovered")){ $(this).addClass("hovered"); } else { alert("removed"); $(this).removeClass("hovered"); }

if( (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ) {

} evt.stopImmediatePropagation(); });

function reset2(e) { if ($(e.currentTarget).hasClass("marker")){

$(".marker").each(function() {

$(this).removeClass("hovered"); }); } }

function reset(e){ if ($(e.currentTarget).parent().hasClass("marker")){

$(".marker .tooltip").each(function() {

$(this).removeClass("hovered"); }); } }

function move(e) { if (!$(e.currentTarget).hasClass("hovered")){

   var x = 0,
       y = 0;

   var xoffset = 0;
   var yoffset = 0;

if( !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ) {

    var x = screen.width - e.clientX,
       y = screen.height - e.clientY;
   if(x < 300 || x > 3840){
   xoffset = $(e.currentTarget).find('span:first').width();
   }
   
   
   if($(e.currentTarget).find('span:first').height() > y){
   yoffset = $(e.currentTarget).find('span:first').height();
   }

for (var i = 0; i < tooltipSpan.length; i++) {

   tooltipSpan[i].style.top = (e.clientY - yoffset) + 'px';
   tooltipSpan[i].style.left = (e.clientX - xoffset) + 'px';
   }

} } } </script>