Widget:Tooltip: Difference between revisions
imported>Pillowkeeper No edit summary |
imported>Pillowkeeper No edit summary |
||
| (10 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 35: | Line 36: | ||
.marker .tooltip { | .marker .tooltip { | ||
display: | display:none; | ||
} | } | ||
| Line 103: | 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 116: | Line 119: | ||
tooltipSpan[i].style.top = (e.clientY + 10 - yoffset) + 'px'; | tooltipSpan[i].style.top = (e.clientY + 10 - yoffset) + 'px'; | ||
tooltipSpan[i].style.left = (e.clientX + 10 - 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> -->
