3

我有一张带有几个标记的地图图像——每个标记都有一个.marker绝对定位的类别，而父 div#map是相对定位的——到目前为止一切都很好。

我正在使用Bootstrap，并且我希望在用户将鼠标悬停在其中一个标记上时弹出一个带有位置名称的工具提示。工具提示出现并按预期工作，只是它不在标记附近 - 它位于#mapdiv 的顶部。

关于如何将工具提示设置为出现在绝对定位的标记旁边/顶部的任何想法？

任何帮助，将不胜感激，

伊恩

4

3 回答 3

2

不确定这是否适用于您的代码（发布它？）

将此添加到您的js中：

$(function() {
  $('.marker').tooltip({placement: 'right'});
});

或者，如果您使用的是data- attributes：

<div class="marker" data-toggle="tooltip" data-placement="right"></div>
于 2013-03-22T17:39:24.863 回答
1

引导工具提示适用于位置相关元素。确保您的元素是相对位置的，如果不是，那么您需要为 .tooltip 编写 css 以显示在正确的位置。

于 2013-08-16T15:54:40.040 回答
0

轻松更改工具提示 data-placement="left", data-placement="right", data-placement="top", data-placement="bottom"

下面提到代码

<div class="col-md-10 col-md-push-1">
    <div class="col-md-3">
    <button type="button" class="btn btn-block btn-danger col-md-10" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
    </div>
    <div class="col-md-3">
    <button type="button" class="btn btn-block btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
    </div>
    <div class="col-md-3">
    <button type="button" class="btn btn-block btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
    </div>
    <div class="col-md-3">
    <button type="button" class="btn btn-block btn-danger" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
    </div>
</div>                

<script>
$('[data-toggle="tooltip"]').tooltip({
});
</script>
于 2014-06-24T13:51:56.690 回答