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" onmouseover="mousemove(this)"> | ||
<!--{$text}--> | <!--{$text}--> | ||
<span class="tooltip"> | <span class="tooltip"> | ||
| Line 37: | Line 37: | ||
var tooltipSpan = document.getElementsByClassName('tooltip'); | var tooltipSpan = document.getElementsByClassName('tooltip'); | ||
function mousemove (e) { | |||
var x = e.clientX, | var x = e.clientX, | ||
y = e.clientY; | y = e.clientY; | ||
Revision as of 14:29, 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 {
color: #f4f26b;
}
.marker:hover{
color:#c3c155; cursor:default;
}
.marker .tooltip {
display:none;
} </style>
<script> var tooltipSpan = document.getElementsByClassName('tooltip');
function mousemove (e) {
var x = e.clientX,
y = e.clientY;
for (var i = 0; i < tooltipSpan.length; i++) {
tooltipSpan[i].style.top = (y + 20) + 'px';
tooltipSpan[i].style.left = (x + 2) + 'px';
}
}; </script>
