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" onmousedown="click()" onmousemove="move(event)"><!--{$text}--> | ||
<span class="tooltip" style="<!--{$style}-->"><!--{$tooltip|unescape:'html'}--> | <span class="tooltip" style="<!--{$style}-->"><!--{$tooltip|unescape:'html'}--> | ||
</span> | </span> | ||
| Line 41: | Line 41: | ||
function click() { | function click() { | ||
console.log("clicked |") | console.log("clicked |"); | ||
if(clicked == false){ | if(clicked == false){ | ||
clicked = true; | clicked = true; | ||
Revision as of 08:25, 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 clicked = false; var tooltipSpan = document.getElementsByClassName('tooltip');
function click() { console.log("clicked |"); if(clicked == false){ clicked = true; } else { clicked = false; } }; function move(e) { console.log(clicked); if(clicked == false){
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>
