Widget:Tooltip: Difference between revisions

From Unforgotten Realms Wiki
Jump to navigationJump to search
imported>Pillowkeeper
No edit summary
imported>Pillowkeeper
No edit summary
Line 1: Line 1:
<span class="marker">
<span class="marker">
<!--{$text|escape:'html'}-->
<!--{$text|escape:'javascript'}-->
<span class="tooltip">
<span class="tooltip">
<!--{$tooltip|escape:'html'}-->
<!--{$tooltip|escape:'javascript'}-->
</span>
</span>
</span>
</span>

Revision as of 14:12, 9 August 2017

<style> .marker: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;

}

.marker .tooltip {

 display:none;

} </style>

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

window.onmousemove = function (e) {

   var x = e.clientX,
       y = e.clientY;
   for (var i = 0; i < tooltipSpan.length; i++) {
   tooltipSpan[i].style.top = (y + 15) + 'px';
   tooltipSpan[i].style.left = (x + 2) + 'px';
   }

}; </script>