Question

我已经在我的网页上使用了this tooltip。它工作正常。但是，我注意到它在IE8浏览器中存在一个主要问题。在IE8，工具提示无法获得全宽。我已经检查了IE8上原始插件的链接，我可以看到它实际上是工具提示的问题。

这就是所有浏览器的用法：

这就是它在IE8上的表现：

我试图用css修复它。但是，我失败了！我不明白这个问题是什么。我已将代码放在jsfiddle但是，我无法从jsfiddle的外部资源路径加载其js文件。所以，如果有帮助，我已将js文件上传到another link。我如何解决IE8的问题？

一些CSS：

div#mcTooltipWrapper {position:absolute;visibility:hidden;overflow:visible;z-index:9999999999;top:0px;}
div#mcTooltip {float:left;border-style:solid;position:relative;overflow:hidden;}

Answer 1

我不知道如何在您正在使用的工具提示创建方法中解决您的问题，但我设计了另一种方法，它提供了完全可自定义的工具提示，也在IE8中。它非常轻巧：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo Lightweight Tooltip CSS + JS</title>
    <style>
    html {
        font-size: 62.5%;
        }
    body {
        font: normal 1.3em Verdana;
        padding-top: 2em; /* creates space for the first tooltip in this demo */
        }
    span.tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dashed black;
        }
    span.tooltip: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>
    <p>The <span class="tooltip">WHO<span class="tip">World Health Organization</span></span> was established in 1948.</p>
    <p>
        It is part of the
        <span class="tooltip">UN
            <span class="tip">United Nations, <br>the successor of the <br>League of Nations</span>
        </span>,
        which was established in 1945.
    </p>
    <script>
        var tooltips = document.querySelectorAll('.tooltip');
        for (var i=0; i<tooltips.length; i++) {
            var tooltip = tooltips[i];
            if ('ontouchstart' in window || window.navigator.msPointerEnabled) {
                tooltip.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 {
                tooltip.onmouseover = function() {
                    this.children[0].style.visibility = 'visible';
                }
                tooltip.onmouseout = function() {
                    this.children[0].style.visibility = 'hidden';
                }
            }
        }
    </script>
</body>
</html>

以下是现场演示：http://codepen.io/anon/pen/Aidcb?editors=100。

一些附带问题：

IE不会在没有实际边框的情况下渲染border-radius。
我做到了这样，在触摸屏设备上，必须点击工具提示元素。我认为那些用户会做的最直观的事情（如果不是全部的话）。
我将提示的宽度设置为auto，并通过提示内容中的br s来调节实际宽度。您也可以设置固定宽度。
如果您还想要＆＃39;泡泡指针＆＃39;，请参阅http://www.sitepoint.com/pure-css3-speech-bubbles/。

。
如果你愿意的话，让我知道你喜欢它。

如何在IE8修复工具提示的宽度

1 个答案: