Widget:Tooltip: Difference between revisions
imported>Pillowkeeper No edit summary |
imported>Pillowkeeper No edit summary |
||
| (48 intermediate revisions by the same user not shown) | |||
| 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> | ||
| Line 7: | Line 8: | ||
<style> | <style> | ||
@media not screen and (max-device-width: 768px) { | |||
.marker:hover .tooltip, .hovered .tooltip { | .marker:hover .tooltip, .hovered .tooltip { | ||
display:block | display:block; | ||
position:fixed; | position:fixed; | ||
overflow:auto; | overflow:auto; | ||
| Line 24: | Line 25: | ||
z-index: 200; | z-index: 200; | ||
} | } | ||
} | |||
.marker { | .marker { | ||
color: #f4f26b; | color: #f4f26b; | ||
| Line 39: | Line 40: | ||
@media screen and (max-device-width: 768px) { | @media screen and (max-device-width: 768px) { | ||
.hovered .tooltip { | |||
display:block; | |||
position:fixed; | |||
overflow:auto; | |||
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; | |||
max-height: 400px; | |||
white-space:pre-line; | |||
z-index: 200; | |||
} | |||
} | } | ||
</style> | </style> | ||
| Line 48: | Line 64: | ||
$(".marker").click(function(evt) { | $(".marker").click(function(evt) { | ||
if(!$(this).hasClass("hovered")){ | if(!$(this).hasClass("hovered")){ | ||
$(this).addClass("hovered"); | $(this).addClass("hovered"); | ||
| Line 58: | Line 69: | ||
$(this).removeClass("hovered"); | $(this).removeClass("hovered"); | ||
} | } | ||
evt.stopImmediatePropagation(); | evt.stopImmediatePropagation(); | ||
}); | }); | ||
| Line 72: | Line 83: | ||
function reset(e){ | function reset(e){ | ||
if ($(e.currentTarget).parent().hasClass("marker")){ | if ($(e.currentTarget).parent().hasClass("marker")){ | ||
$(".marker").each(function() { | $(".marker .tooltip").each(function() { | ||
$(this).removeClass("hovered"); | $(this).removeClass("hovered"); | ||
}); | }); | ||
| Line 80: | Line 91: | ||
function move(e) { | function move(e) { | ||
if($(e.currentTarget).find("img, a").length){ | |||
$(e.currentTarget).find("img, a").each(function() { | |||
$(this).attr('title', ''); | |||
}); | |||
} | |||
if (!$(e.currentTarget).hasClass("hovered")){ | if (!$(e.currentTarget).hasClass("hovered")){ | ||
var x = 0, | var x = 0, | ||
| Line 87: | Line 104: | ||
var yoffset = 0; | var yoffset = 0; | ||
if( !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ) { | if( !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ) { | ||
var x = screen.width - e.clientX, | var x = screen.width - e.clientX, | ||
y = screen.height - e.clientY; | y = screen.height - e.clientY; | ||
| Line 98: | Line 117: | ||
} | } | ||
for (var i = 0; i < tooltipSpan.length; i++) { | for (var i = 0; i < tooltipSpan.length; i++) { | ||
tooltipSpan[i].style.top = (e.clientY - yoffset) + 'px'; | tooltipSpan[i].style.top = (e.clientY + 10 - yoffset) + 'px'; | ||
tooltipSpan[i].style.left = (e.clientX - xoffset) + 'px'; | tooltipSpan[i].style.left = (e.clientX + 10 - xoffset) + 'px'; | ||
} | } | ||
} | } | ||
} | } | ||
} | |||
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { | |||
$(".marker").each(function() { | |||
$(this).removeClass("marker"); | |||
$(this).addClass("mobileMarker"); | |||
}); | |||
} | } | ||
</script> | </script> | ||
--> | |||
Latest revision as of 23:33, 9 October 2017
<style> @media not screen and (max-device-width: 768px) { .marker:hover .tooltip, .hovered .tooltip {
display:block; position:fixed; overflow:auto; 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; max-height: 400px; white-space:pre-line; z-index: 200;
} } .marker {
color: #f4f26b;
}
.marker:hover{
color:#c3c155; cursor:default;
}
.marker .tooltip {
display:none;
}
@media screen and (max-device-width: 768px) {
.hovered .tooltip {
display:block;
position:fixed;
overflow:auto;
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;
max-height: 400px;
white-space:pre-line;
z-index: 200;
} } </style>
<script> var tooltipSpan = document.getElementsByClassName('tooltip');
$(".marker").click(function(evt) {
if(!$(this).hasClass("hovered")){
$(this).addClass("hovered");
} else {
$(this).removeClass("hovered");
}
evt.stopImmediatePropagation(); });
function reset2(e) { if ($(e.currentTarget).hasClass("marker")){
$(".marker").each(function() {
$(this).removeClass("hovered"); }); } }
function reset(e){ if ($(e.currentTarget).parent().hasClass("marker")){
$(".marker .tooltip").each(function() {
$(this).removeClass("hovered"); }); } }
function move(e) {
if($(e.currentTarget).find("img, a").length){
$(e.currentTarget).find("img, a").each(function() {
$(this).attr('title', );
});
}
if (!$(e.currentTarget).hasClass("hovered")){
var x = 0,
y = 0;
var xoffset = 0; var yoffset = 0;
if( !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ) {
var x = screen.width - e.clientX,
y = screen.height - e.clientY;
if(x < 300 || x > 3840){
xoffset = $(e.currentTarget).find('span:first').width();
}
if($(e.currentTarget).find('span:first').height() > y){
yoffset = $(e.currentTarget).find('span:first').height();
}
for (var i = 0; i < tooltipSpan.length; i++) {
tooltipSpan[i].style.top = (e.clientY + 10 - yoffset) + 'px'; tooltipSpan[i].style.left = (e.clientX + 10 - xoffset) + 'px'; }
} } }
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { $(".marker").each(function() { $(this).removeClass("marker"); $(this).addClass("mobileMarker"); });
} </script> -->
