Question

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

我正在使用Bootstrap，并且我想要一个tooltip，其中包含当用户在其中一个标记上悬停时要弹出的位置名称。工具提示出现并按预期工作，除了它不在标记附近 - 它位于#map div的顶部。

关于如何设置工具提示以显示在绝对定位的标记旁边/上的任何想法？

任何帮助将不胜感激，

伊恩

Answer 1

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

将此添加到您的js：

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

或者如果您使用data- attributes：

<div class="marker" data-toggle="tooltip" data-placement="right"></div>

Answer 2

Bootstrap工具提示适用于位置相对元素。确保你的元素是相对的位置，如果没有，那么你需要为.tooltip编写css以显示在正确的位置。

Answer 3

轻松更改工具提示数据展示次数=＆＃34;左＆＃34;，数据展示位置=＆＃34;正确＆＃34;，数据展示位置=＆＃34;顶部＆＃34;，数据展示位置=＆＃34;底部＆＃34;

下面提到代码

<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>

Bootstrap工具提示的问题没有显示在正确的位置

3 个答案: