適用於移動設備的工具提示在Android瀏覽器中不起作用
[英]Mobile-friendly tooltip not working in Android browser
問題描述
我想為我的網站提供一個工具提示，並找到了一個不錯的解決方案： http : //osvaldas.info/elegant-css-and-jquery-tooltip-sensitive-mobile-friendly 。
他們說這是移動友好的。 它在我的ipad上效果很好，但是在我的Android（如果需要，則為HTC Wildfire）網絡瀏覽器中，它不起作用（它的反應方式就像是一段簡單的文本）。
1）原因是什么，Android有什么特別之處？
2）如何解決該問題以及如何使工具提示對兩種移動操作系統都友好？
2 個解決方案
解決方案1
1 2014-07-06 10:09:08
“ 1）原因是什么，Android的特殊之處是什么？”
FC：很多，但是我想不出什么可以解釋您的問題。 這就是沒有進一步說明問題的方法。
“ 2）如何解決該問題以及如何使工具提示對兩個移動操作系統都友好。”
FC：幸運的是，這很容易。 使用非常簡單的本機/原始Javascript和一些簡單的嵌套范圍： live demo ; 使用的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Light-weight Tooltip by FC</title>
<style>
html {
font-size: 62.5%;
}
body {
font: normal 1.3em Verdana;
background-color: white;
/* just for the JSBin demo */
}
h2 {
text-align: center;
margin-bottom: 2em;
}
span.tool {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
span.tool:hover {
cursor: help;
}
span.tip {
position: absolute;
bottom: 20px;
left: 0px;
display: block;
width: auto;
white-space: nowrap;
font-size: .9em;
border: 0px solid black; /* change as desired */
border-radius: 6px;
padding: 1px 5px;
background: #eee;
background: linear-gradient(top, #eee, #ccc);
background: -moz-linear-gradient(top, #eee, #ccc);
background: -o-linear-gradient(top, #eee, #ccc);
background: -webkit-linear-gradient(top, #eee, #ccc);
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
background: -ms-linear-gradient(top, #eee, #ccc);
filter: progid: DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#eeeeee, EndColorStr=#cccccc);
zoom: 1;
visibility: hidden;
}
</style>
</head>
<body>
<h2>Light-weight Tooltip by FC</h2>
<p>The <span class="tool">WHO<span class="tip">World Health Organization</span></span> was established in 1948.</p>
<p>
It is part of the
<span class="tool">UN
<span class="tip">United Nations, <br>the successor of the <br>League of Nations</span>
</span>, which was established in 1945.
</p>
<hr>
<p>Explanation and 'minds':</p>
<ul>
<li>The method consists of local nested spans ('tools' with 'tips' inside), positioned relative-absolute.</li>
<li>If the same tips are to be used several times throughout the page or website, the tip spans can be populated centrally with Javascript or server-side scripting.</li>
<li>In the current code the width of the tips is set to <i>auto</i>, and controlled with <br>s in the tip text. Change to fixed width as desired.</li>
<li>With the current code tablet users must tap (= <i>onclick</i>) rather than press-hold (= <i>onmousedown</i>). It is assumed that that is the intuitive thing most tablet users do, but it can be changed to press-hold.</li>
<li>The HTML is valid and the code works in IE8 as well.</li>
<li>For the sake of completeness: IE9 does not form a border-radius when the element has no declared border, or a border-width of 0.</li>
</ul>
<script>
var tools = document.querySelectorAll('.tool'); // mind the dot
var nrOfTools = tools.length;
for (var i = 0; i < nrOfTools; i++) {
if ('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch)) {
tools[i].onclick = function() {
if (this.children[0].style.visibility == '' || this.children[0].style.visibility == 'hidden')
this.children[0].style.visibility = 'visible';
else
this.children[0].style.visibility = 'hidden';
}
} else {
tools[i].onmouseover = function() {
this.children[0].style.visibility = 'visible';
}
tools[i].onmouseout = function() {
this.children[0].style.visibility = 'hidden';
}
}
}
</script>
</body>
</html>
。
請注意，在雙模式計算機（觸摸屏和鍵盤）上，似乎無法檢測到哪種模式。 因此，在這些機器上，其中一台（點擊或單擊）可能無法在其中一種模式下工作。
尋找其他缺陷，或者您有這些機器的更多信息嗎？ 請發表評論。
解決方案2
1 2017-07-23 08:38:27
我找到了解決這一神秘挑戰的方法。 在大多數情況下，您所擁有的限制與動態HTML有關，並且該函數總是會向您返回如下內容：
這意味着未創建對象，jQuery無法找到該對象，那么您需要應用如下所述的內容：
https://stackoverflow.com/a/15090957/2889347
該代碼必須進行編輯，如下所示：
$(function () {
$(document.body).on('mouseenter touchstart mouseleave touchend', '[rel=tooltip]', function () {
var targets = $('[rel=tooltip]'),
target = false,
tooltip = false,
title = false;
targets.on('mouseenter touchstart', function () {
target = $(this);
tip = target.attr('title');
tooltip = $('<div id="tooltip"></div>');
if (!tip || tip == '')
return false;
target.removeAttr('title');
tooltip.css('opacity', 0)
.html(tip)
.appendTo('body');
var init_tooltip = function () {
if ($(window).width() < tooltip.outerWidth() * 1.5)
tooltip.css('max-width', $(window).width() / 2);
else
tooltip.css('max-width', 340);
var pos_left = target.offset().left + (target.outerWidth() / 2) - (tooltip.outerWidth() / 2),
pos_top = target.offset().top - tooltip.outerHeight() - 20;
if (pos_left < 0) {
pos_left = target.offset().left + target.outerWidth() / 2 - 20;
tooltip.addClass('left');
}
else
tooltip.removeClass('left');
if (pos_left + tooltip.outerWidth() > $(window).width()) {
pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
tooltip.addClass('right');
}
else
tooltip.removeClass('right');
if (pos_top < 0) {
var pos_top = target.offset().top + target.outerHeight();
tooltip.addClass('top');
}
else
tooltip.removeClass('top');
tooltip.css({ left: pos_left, top: pos_top })
.animate({ top: '+=10', opacity: 1 }, 50);
};
init_tooltip();
$(window).resize(init_tooltip);
var remove_tooltip = function () {
tooltip.animate({ top: '-=10', opacity: 0 }, 50, function () {
$(this).remove();
});
target.attr('title', tip);
};
target.on('mouseleave touchend', remove_tooltip);
tooltip.on('click', remove_tooltip);
});
});
});
訣竅在於：
$(document.body).on('mouseenter touchstart mouseleave touchend', '[rel=tooltip]', function () { //... });
這部分代碼將允許您在代碼完全加載到主體上時調用它，並將跟蹤您要執行的模式。
此外，這是一些在Android中可以正常使用的工具提示的屏幕截圖。
另外，您可以添加以下其他事件：
- touchstart
- touchend
更新2017-07-25：
我在使用某些WebView時遇到了一些麻煩，並將代碼升級為以下代碼，應該可以正常使用：
$(function() {
var target = false,
tooltip = false,
title = false;
$(document.body).on('click tap', function (e) {
if (event.target.nodeName !== "ABBR" && tooltip != false) {
remove_tooltip();
}
});
var remove_tooltip = function()
{
tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
{
$( this ).remove();
});
target.attr( 'title', tip );
};
$(document.body).on('click tap', '[rel=tooltip]', function () {
target = $( this );
tip = target.attr( 'title' );
tooltip = $( '<div id="tooltip"></div>' );
if( !tip || tip == '' )
return false;
target.removeAttr( 'title' );
tooltip.css( 'opacity', 0 )
.html( tip )
.appendTo( 'body' );
var init_tooltip = function()
{
if( $( window ).width() < tooltip.outerWidth() * 1.5 )
tooltip.css( 'max-width', $( window ).width() / 2 );
else
tooltip.css( 'max-width', 340 );
var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
pos_top = target.offset().top - tooltip.outerHeight() - 20;
if( pos_left < 0 )
{
pos_left = target.offset().left + target.outerWidth() / 2 - 20;
tooltip.addClass( 'left' );
}
else
tooltip.removeClass( 'left' );
if( pos_left + tooltip.outerWidth() > $( window ).width() )
{
pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
tooltip.addClass( 'right' );
}
else
tooltip.removeClass( 'right' );
if( pos_top < 0 )
{
var pos_top = target.offset().top + target.outerHeight();
tooltip.addClass( 'top' );
}
else
tooltip.removeClass( 'top' );
tooltip.css( { left: pos_left, top: pos_top } )
.animate( { top: '+=10', opacity: 1 }, 50 );
};
init_tooltip();
$( window ).resize( init_tooltip );
tooltip.bind( 'click tap', remove_tooltip );
});
});
我進行了三個重要更改：
我搜索整個站點上的每個單擊/輕擊，只有在選擇了ABBR並定義了工具提示時，才應用刪除的功能。
$（document.body）.on（'click tap'，function（e）{}）;
我跟蹤了ABBR的點擊/點擊，並顯示了工具提示：
$（document.body）.on（'click tap'，'[rel = tooltip]'，function（）{}）;
我將刪除功能公開。 另外，我檢查了Tooltip是否已初始化 。
您可能會問我： 為什么用單擊或點擊替換所有鼠標事件？
通常，在“移動開發”中，您不會跟蹤Mouse事件，例如：mouseenter，mouseleave等。由於人們很少在日常活動中使用鼠標，因此我們更多地使用了水龍頭。
什么觸發android chrome顯示“make page mobile-friendly”面板？
[英]What triggers android chrome to show the “make page mobile-friendly” panel?
適合移動設備的網頁設計：如何在文本輸入后以編程方式縮小？
[英]Mobile-friendly web design: How to programmatically zoom out after text input?
我測試的所有網站的Lighthouse的“移動設備友好型”返回false
[英]Lighthouse's “mobile-friendly” returning false for all sites I test
Phonegap android ajax調用在瀏覽器中工作，而不是在移動設備上
[英]Phonegap android ajax calls working in browser, not on mobile
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.