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 42: | Line 42: | ||
var x = e.clientX, | var x = e.clientX, | ||
y = e.clientY; | y = e.clientY; | ||
console.log(screen.width - e.screenX) | |||
var val = 0; | var val = 0; | ||
if(screen.width - e.screenX > 900){ | if(screen.width - e.screenX > 900){ | ||
val = -175; | val = -175; | ||
} | } | ||
for (var i = 0; i < tooltipSpan.length; i++) { | for (var i = 0; i < tooltipSpan.length; i++) { | ||
Revision as of 14:46, 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; max-width: 400px; white-space:pre;
}
.marker {
color: #f4f26b;
}
.marker:hover{
color:#c3c155; cursor:default;
}
.marker .tooltip {
display:none;
} </style>
<script> var tooltipSpan = document.getElementsByClassName('tooltip');
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
console.log(screen.width - e.screenX)
var val = 0;
if(screen.width - e.screenX > 900){
val = -175;
}
for (var i = 0; i < tooltipSpan.length; i++) {
tooltipSpan[i].style.top = (y + 20) + 'px';
tooltipSpan[i].style.left = (x + 2 + val) + 'px';
}
}; </script>
