Question

我想要完成的是向包含我正在禁用的输入的容器div添加工具提示。基本上，禁用工具提示。看到我无法在禁用输入上执行此操作，而是在容器元素上执行此操作。

我正在尝试使用以下方法动态地将工具提示添加到容器中：

$('.input-group date').tooltip({'container':'body','placement':'top', 'trigger' : 'hover', 'title':'maximize'});

但它不起作用。

在document.ready上我这样做：

$('[rel="tooltip"]').tooltip() // Opt-in for tooltips

元素本身看起来像这样：

<div class="input-group date" rel="tooltip">
                                        <input type="text" class="form-control" id="dp1" style="width: 100px; vertical-align: middle" />
                                        <button class="input-group-addon" id="dp1Icon" onclick="return false" style="outline-style:none"><img src="<%=context%>/images/calendar-glyph.png"></button>
                                    </div>

我做错了什么？我想我已经准备好了所有正确的元素。当禁用子输入时，是否有更简单的方法将工具提示分配给容器元素？

我让这个更复杂吗？

Answer 1

这：

$('.input-group date')

表示“选择所有<date>元素，这些元素是input-group类”元素的后代。

鉴于你说你的标记是：

<div class="input-group date" rel="tooltip">

你可能想要：

$('.input-group.date')

即。 “选择同时具有input-group和date类”

的所有元素

TL; DR：在选择器中使用点而不是空格

Answer 2

我最终使用show.bs.tooltip处理程序并测试组件是否被禁用;如果没有，我会阻止默认操作la：

// Set the tooltip for a start date that can't be edited (when mtg is in progress)
    $(".form-group.startDate").on("show.bs.tooltip",function(e){
        if ( !$("#dp1").is(":disabled") )
            e.preventDefault();
    });

禁用子项时，将工具提示添加到容器

2 个答案: