Question

我想为我的网站制作工具提示并找到一个很好的解决方案：http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly。

他们说这是移动友好的。它在我的ipad上工作得很好，但是在我的Android（HTC Wildfire，如果有必要的话）网页浏览器中它不起作用（它的反应方式就好像它是一段简单的文本）。

1）是什么原因，Androids有什么特别之处？
2）如何解决以及如何使移动操作系统的工具提示对移动设备友好？

Answer 1

＆＃34; 1）是什么原因，Androids有什么特别之处？＆＃34;
FC：很多，但我没想到会解释你的问题。不是没有进一步说明你的问题，就是这样。

＆＃34; 2）如何解决这个问题以及如何使移动操作系统的工具提示移动友好。＆＃34;
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 &lt;br&gt;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>

。
请注意，在双模机器（触摸屏加键盘）上，似乎无法检测到它处于哪种模式。因此，在这些机器上，一个或另一个（点击或单击）可能无法在其中一种模式下工作。

找到其他不完美之处，或者您有更多信息这些机器？请发表评论。

Answer 2

我找到了这个神秘挑战的解决方案。大多数情况下，您所拥有的限制与动态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（＆＃39;点击点击＆＃39;，功能（e）{}）;
我跟踪了ABBR上的点击/点按，我显示了工具提示：

$（document.body）.on（＆＃39;点按＆＃39;，＆＃39; [rel = tooltip]＆＃39;，function（）{}）;
我公开删除功能。另外，我检查了工具提示是否已初始化。

您可以问我：为什么您通过点击或点击替换所有鼠标事件？

通常，在移动开发中，您不会跟踪鼠标事件，例如：mouseenter，mouseleave等。由于人们几乎不会使用鼠标进行日常活动，因此我们会更多地使用手指进行点击。

移动友好的工具提示无法在Android浏览器中运行

2 个答案: