引导工具提示位置在移动设备中不起作用答案

【问题标题】：Bootstrap tooltip position not working in mobile引导工具提示位置在移动设备中不起作用
【发布时间】：2015-02-13 15:30:06
【问题描述】：

我正在尝试使用引导程序 3 在小图像上的弹出框上显示工具提示。

HTML：

<div class="col-sm-4  text-right">
    <span  class="warning-tooltip-icon" data-toggle="tooltip"  data-placement="top" 
           title="To have a better match result we need you to know about your language level"></span>
</div>

CSS：

.warning-tooltip-icon{
    background-image:url(/img/exclamation-icon.png); 
    width: 17px;
    height: 15px;
    display: inline-block;
    background-repeat: no-repeat;
}

JS：

 $(".warning-tooltip-icon").tooltip({container: 'body'});

它在台式电脑上完美运行，但在移动设备上，工具提示消息显示在不同的位置。

我该如何解决这个问题？

【问题讨论】：

您的网格类非常多余；见github.com/twbs/bootlint/wiki/E029
我只尝试添加类 col-sm-4，但它不起作用。如果我将图标移动到新行中，那么它的工作。

标签： twitter-bootstrap tooltip popover

【解决方案1】：

试试这个

$(document).ready(function () {
    $(function () {
        $('[title]').attr("data-rel", "tooltip");
        $("[data-rel='tooltip']")
            .attr("data-placement", "top")
            .attr("data-content", function () {
            return $(this).attr("title")
        })
            .removeAttr('title');
        var showPopover = function () {
            $(this).popover('show');
        };
        var hidePopover = function () {
            $(this).popover('hide');
        };
        $("[data-rel='tooltip']").popover({
            trigger: 'manual'
        }).click(showPopover).hover(showPopover, hidePopover);
    });
});

像这样使用它：

<span class="warning-tooltip-icon" title="To have a better match result we need you to know about your language level"></span>

【讨论】：

我应用了这段代码。它的显示和隐藏完美，但位置错位。在移动视图上，标题不显示在顶部，它显示不同的位置（远离元素），在桌面上很好。
那么问题出在你的包装元素上

【解决方案2】：

是的，我使用了冗余类，我更改了我的 Html 代码。但仍然存在同样的问题。 HTML

<div class="col-sm-4 text-right">
<span  class="warning-tooltip-icon" data-toggle="tooltip"  data-placement="top" 
       title="To have a better match result we need you to know about your language level"></span>

如果我更改了 html 代码，它可以在移动设备和桌面设备上正常工作。

HTML

<div class="row">
<span  class="warning-tooltip-icon" data-toggle="tooltip"  data-placement="top" 
       title="To have a better match result we need you to know about your language level"></span>

【讨论】：