Javascript 移动友好的工具提示在Android浏览器中不起作用
我想为我的网站制作一个工具提示，并找到了一个很好的解决方案： 他们说它是移动友好型的。它在我的ipad上工作得很好，但在我的Android（如果有必要的话，HTC Wildfire）网络浏览器中它不工作（它的反应方式就像它是一段简单的文本） 1） 原因是什么，机器人有什么特别之处？Javascript 移动友好的工具提示在Android浏览器中不起作用,javascript,android,jquery,jquery-mobile,tooltip,Javascript,Android,Jquery,Jquery Mobile,Tooltip,我想为我的网站制作一个工具提示，并找到了一个很好的解决方案： 他们说它是移动友好型的。它在我的ipad上工作得很好，但在我的Android（如果有必要的话，HTC Wildfire）网络浏览器中它不工作（它的反应方式就像它是一段简单的文本） 1） 原因是什么，机器人有什么特别之处？ 2） 如何解决这一问题，以及如何为两种移动操作系统提供移动友好的工具提示？“1）原因是什么，Androids有什么特殊之处？” FC：很多，但我想不出什么能解释你的问题。也就是说，如果没有对您的问题进行进一步说明，就
2） 如何解决这一问题，以及如何为两种移动操作系统提供移动友好的工具提示？“1）原因是什么，Androids有什么特殊之处？”
FC：很多，但我想不出什么能解释你的问题。也就是说，如果没有对您的问题进行进一步说明，就不能这样做 “2）如何解决此问题，以及如何使工具提示对两个移动操作系统都友好。”
幸运的是，这很容易。使用非常简单的本机/普通Javascript和一些简单的嵌套跨度：；使用的代码：
<!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>
由FC提供的轻量级工具提示
html{
字体大小：62.5%；
}
身体{
字体：普通1.3em Verdana；
背景色：白色；
/*只是为了JSBin演示*/
}
氢{
文本对齐：居中；
边缘底部：2米；
}
span.工具{
位置：相对位置；
显示：内联块；
边框底部：1px点黑色；
}
工具：悬停{
光标：帮助；
}
翼尖{
位置：绝对位置；
底部：20px；
左：0px；
显示：块；
宽度：自动；
空白：nowrap；
字体大小：.9em；
边框：0px纯黑色；/*根据需要更改*/
边界半径：6px；
填充物：1px 5px；
背景：#eee；
背景：线性梯度（顶部、eee、ccc）；
背景：-moz线性梯度（顶部、eee、ccc）；
背景：-o-线性梯度（顶部，#eee，#ccc）；
背景：-webkit线性梯度（顶部，#eee，#ccc）；
背景：-webkit渐变（线性、左上、左下、从（#eee）到（#ccc））；
背景：-ms线性梯度（顶部、eee、ccc）；
过滤器：progid:DXImageTransform.Microsoft.Gradient（GradientType=0，StartColorStr=#eeeeee，EndColorStr=#cccc）；
缩放：1；
可见性：隐藏；
}
由FC提供的轻量级工具提示
世界卫生组织成立于1948年
这是该计划的一部分
联合国
联合国，
国际联盟的继任者
，成立于1945年。
解释和“思想”：
- 该方法由局部嵌套跨距（“工具”内有“提示”）组成，相对绝对定位
- 如果在整个页面或网站中多次使用相同的提示，则可以使用Javascript或服务器端脚本集中填充提示范围
- 在当前代码中，提示的宽度设置为自动，并由提示文本中的brs控制。根据需要更改为固定宽度
- 使用当前代码，平板电脑用户必须点击（=onclick）而不是按住（=onmousedown）。假设这是大多数平板电脑用户所做的直观操作，但也可以更改为按住
- HTML是有效的，代码也可以在IE8中使用
- 为了完整性：当元素没有声明的边界或边界宽度为0时，IE9不会形成边界半径
var tools=document.querySelectorAll（'.tool'）；//小心点
var nrOfTools=tools.length；
对于（var i=0；i请注意，在双模机器（触摸屏加键盘）上，似乎无法检测它处于哪种模式。因此，在这些机器上，一种或另一种（点击或点击）可能无法在其中一种模式下工作
找到其他缺陷，或者你有更多关于这些机器的信息吗？请留下评论 我找到了解决这个神秘挑战的办法。大多数情况下，您面临的限制与动态HTML有关，函数总是会返回如下内容：
$(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);
});
});
});
$(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);
});
});
});
- 触控启动
- 接触端
$(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 );
});
});
$（函数（）{
var目标=错误，
工具提示=false，
标题=假；
$（document.body）.on（'单击tap'，函数（e）{
if（event.target.nodeName！=“ABBR”&&tooltip！=false）{
删除工具提示（）；
}
});
var remove_tooltip=函数（）
{
动画（{top:'-=10'，不透明度：0}，50，函数（）
{
$（this.remove（）；
});
target.attr（'title'，tip）；
};
$（document.body）.on（'cl