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 18: | Line 18: | ||
font-family: sans-serif; | font-family: sans-serif; | ||
font-size: 14px; | font-size: 14px; | ||
} | |||
.marker { | |||
color: #f4f26b; | |||
} | |||
.marker:hover{ | |||
color:#c3c155; | |||
cursor:default; | |||
} | } | ||
| Line 32: | Line 41: | ||
y = e.clientY; | y = e.clientY; | ||
for (var i = 0; i < tooltipSpan.length; i++) { | for (var i = 0; i < tooltipSpan.length; i++) { | ||
tooltipSpan[i].style.top = (y + | tooltipSpan[i].style.top = (y + 20) + 'px'; | ||
tooltipSpan[i].style.left = (x + 2) + 'px'; | tooltipSpan[i].style.left = (x + 2) + 'px'; | ||
} | } | ||
}; | }; | ||
</script> | </script> | ||
Revision as of 14:28, 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');
window.onmousemove = function (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>
