Jquery UI 工具提示不显示在任何东西上

Question

我正在使用 2 个 bootstrap 日期选择器和 我想验证开始日期是否大于结束日期然后显示工具提示

这是我目前的情况：

http://jsfiddle.net/k84phas6/

$('#startdate_datepicker').tooltip({ content : "Example"});

出现了警告，但工具提示没有任何作用，我不明白为什么。

有什么想法吗？

Answer 1

现在您正在为该输入初始化工具提示。您需要在初始化后手动打开工具提示，如下所示：

$("#startdate_datepicker").tooltip({
   content: "Message!"
}).tooltip("open");

Answer 2

在 startdate_datepicker 元素上添加 data-toggle="tooltip" 和 data-trigger="manual" 属性以及 title，然后从 JS 切换工具提示通过使用“toggle”作为参数调用 tooltip() method。添加了以下代码片段：

HTML startdate_datepicker 元素:

<input class="form-control start_date" type="text" placeholder="Start Date" name="startdate_datepicker" id="startdate_datepicker" required="true" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" data-trigger="manual">

JavaScript:

if (start > end) {
    e.preventDefault();
    // alert("Stop and tooltip");
    $('#startdate_datepicker').tooltip("toggle");
}

找到fiddle code

Answer 3

刚刚检查了你的fiddle，有多个地方你必须进行更改。

1. 从您的输入框中删除 title="" 字段。这与 bootstrap 使用的工具提示的标题字段发生冲突。
2. 如上答案所示，您必须以编程方式触发它才能显示。

您的代码如下所示

这里修改了你的fiddlehttp://jsfiddle.net/b7urzdxj/

//title removed
<input class="form-control start_date" type="text" placeholder="Start Date" name="startdate_datepicker" id="startdate_datepicker" required="true">

//tooltip modified and programmatically triggered

 if (start > end) {
    e.preventDefault();
        alert("Stop and tooltip");
    $('#startdate_datepicker').tooltip({ title : "Example", placement:'bottom'});
    $('#startdate_datepicker').tooltip('show')
  }