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

Posted 2023-05-08

【中文标题】Jquery UI 工具提示不显示在任何东西上

【英文标题】：Jquery UI tooltip doesn't show on anything

【发布时间】：2021-07-28 15:00:27

【问题描述】：

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

这是我目前所拥有的：

http://jsfiddle.net/k84phas6/

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

警报出现了，但工具提示没有做任何事情，我不明白为什么。

有什么想法吗？

【参考方案1】：

刚刚检查了您的小提琴，您必须在多个地方进行更改。

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

您的代码将如下所示

这是你修改过的小提琴http://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')
  

【讨论】：

谢谢！工作正常，奇怪的是关于 tooltip 的 jquery 文档没有提到你必须在最后放置一个 tooltip('show') 。即使在示例中，他们也只是在输入中添加了一个标题，然后 $("#tooltip").tooltip();是因为bootstrap吗？

【参考方案2】：

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

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

【讨论】：

感谢工作正常。什么是最好的？将数据切换、位置、标题等放入输入中，或者使用工具提示添加标题然后显示？

把所有的静态元素，如data-toggle，placement等都放在输入中以减少JS代码，如果标题是动态的，则从JS代码中传递。

【参考方案3】：

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

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