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: | ||
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script> | <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script> | ||
<span class="marker" | <span class="marker" onmousemove="move(this)"><!--{$text}--> | ||
<span class="tooltip" style="<!--{$style}-->"><!--{$tooltip|unescape:'html'}--> | <span class="tooltip" style="<!--{$style}-->"><!--{$tooltip|unescape:'html'}--> | ||
</span> | </span> | ||
| Line 37: | Line 37: | ||
<script> | <script> | ||
var tooltipSpan = document.getElementsByClassName('tooltip'); | var tooltipSpan = document.getElementsByClassName('tooltip'); | ||
function move(e) { | |||
var x = e.clientX, | var x = e.clientX, | ||
y = e.clientY; | y = e.clientY; | ||
| Line 65: | Line 59: | ||
} | } | ||
}; | }; | ||
</script> | </script> | ||
Revision as of 08:18, 10 August 2017
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>
<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-line;
}
.marker {
color: #f4f26b;
}
.marker:hover{
color:#c3c155; cursor:default;
}
.marker .tooltip {
display:none;
} </style>
<script>
var tooltipSpan = document.getElementsByClassName('tooltip');
function move(e) {
var x = e.clientX,
y = e.clientY;
var xoffset = 0;
if(screen.width - e.clientX < 550){
xoffset = -350;
}
var yoffset = 0;
if(screen.height - e.clientY < 250){
yoffset = -120;
}
for (var i = 0; i < tooltipSpan.length; i++) {
tooltipSpan[i].style.top = (y + 20 + yoffset) + 'px';
tooltipSpan[i].style.left = (x + 2 + xoffset) + 'px';
}
};
</script>
