html - 响应式视口中的引导工具提示定位出乎意料

Question

嗨堆栈溢出社区

我正在使用带有一些文本和图像的引导工具提示。在桌面视图中，它按预期工作，但是当我查看响应式/移动视图时，当用户单击工具提示图标时，它会出现在中心（与内容重叠）。我想根据可用空间显示在顶部或底部。

预期的：

代码：

<label for="lotnumber" class="form-label label-error">Lot Number</label>
<div data-toggle="tooltip" data-placement="top" class="tooltip-main" data-html="true" title="<p>What is Lorem Ipsum Lorem Ipsum is simply dummy text.</p><p class='text-center'><img src='images/lot-screenshot.png'/></p>">
<i class="fa fa-question-circle icon-tooltip"></i>
</div>
<input type="text" class="form-control input-error" placeholder="" id="p_lot_number">

标签： htmlcsstwitter-bootstraptooltipresponsive