Question

以下是我的小提琴，我试图在图像的地图标签上显示工具提示。如果我使用Firefox，工具提示工作正常，但它在chrome上工作不正常。请仔细看看跟随小提琴并将鼠标悬停在图像的边缘上，然后您将看到工具提示出现在左上方而不是底部。请告诉我如何修复它：

http://jsfiddle.net/4HptX/53/

    <div class="pull-left">
    <br>
    <br>
    <br>
    <br>
    <img width="54" height="17" border="0" style="margin-left:15px;" usemap="#Map" alt="" src="http://www.dscl.org/eTitles/device-apple-mac-button.jpg">
    <map name="Map">
        <area href="#hmm" coords="2,0,21,19" shape="rect" title="" onclick="showsection('qal')" data-placement="bottom" data-toggle="tooltip" class="grid-menu" data-original-title="Why its not on bottom?">
        <area href="#hmm" coords="36,-1,56,19" shape="rect" title="" onclick="showsection('qa')" data-placement="bottom" data-toggle="tooltip" class="grid-menu" data-original-title="Questions | Answers">
    </map>
</div>

Answer 1

引导程序用于确定在何处绘制imagemap的代码会在Chrome中为区域返回意外结果。*不幸的是，没有直接的方法来更改计算此显式案例的位置的方式。

因此，我最初的想法是改变你应用工具提示的方式。如果不是仅仅使用应用于图像地图区域的工具提示，而是根据图像找到它，并根据地图区域的鼠标悬停/鼠标移动来切换它，我想您会得到所需的结果。

而不是

$('.grid-menu').tooltip();

尝试

$('.grid-menu').on('mouseover', function () {
    $('#myImg').tooltip({placement: 'bottom', title: $(this).data('original-title')});
    $('#myImg').tooltip('show');
}).on('mouseout', function () {
    $('#myImg').tooltip('hide')
});

在这里看到我的小提琴 - 注意我删除了其中一个区域，因为坐标是否正确的不确定性。无论你使用多少个区域，它都应该可以正常工作 - 从它们中获得的唯一重要的是它们的标题。

http://jsfiddle.net/sheldon_griffin/bfY56/1/

* _{Bootstrap在area元素上调用getBoundingClientRect（），并为所有属性返回0。可能是正确的，可能不是（似乎FireFox或Chrome正在给出错误的答案），但对于这种情况肯定是错误的答案。}

Answer 2

你去吧

coords="0,33,21,54"

http://jsfiddle.net/4HptX/55/

工具提示不能像镀铬那样工作

2 个答案: