使用JavaScript / JQuery切换隐藏的工具提示

Question

因此，我有一个问题了一段时间，我不知道如何进行工具提示切换。 在网站中，有时会包含涉及工具提示的教程，以解释网站的功能或使用方法。 我一直在尝试在自己的网站上进行此操作

<div title = "This is the tutorial!" data-toggle = "tooltip"></div>

所以我做了一个工具提示，但是我想不出如何悬停它就不能使它成为工具提示...是否有一个特定的属性可以在div上切换以使工具提示出现而无需用户将鼠标悬停在div上？ 谢谢！ （工具提示是内置的HTML提示。在我的网站上，我使用了附加的引导程序模板来使它们看起来更好。）

回顾：我想要实现的是一个工具提示，它可以在运行某个功能时显示，而在运行另一个功能时隐藏。 我无法弄清楚，因为其他网站上的所有示例都要求用户将鼠标悬停或单击按钮或执行其他操作。

Answer 1

引导程序中的工具提示是“选择加入”项目-也就是说，您需要自己启用它们-

见下文：

UPDATE

要始终显示工具提示：在页面加载时手动触发工具提示，请参见下面的更新代码

 $(function() { $('#mydiv').tooltip({ trigger: 'manual' }); $("button").on('click', function() { $('#mydiv').tooltip('toggle'); }); }); 

 #mydiv { width: 400px; border: 1px solid blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <button type="button" class="btn btn-default">Click to show Tooltip</button> <hr/> <div id="mydiv" title="This is the tutorial!" data-toggle="tooltip" data-placement="bottom">tooltip here?</div> 

Answer 2

首先给div一个id或class：

<div id='tutorial1' title = "This is the tutorial!" data-toggle = "tooltip"></div>

然后将mouseover / mouseout事件附加到显示/隐藏事件：

$('#id_of_thing_you_hover')..mouseover(function () {
    $('#tutorial1').show();
  })
  .mouseout(function () {
    $('#tutorial1').hide();
  });

jQuery函数.show() .hide()和.show()只需切换元素的display属性

Answer 3

有几种方法可以完成此操作。

使用JQuery UI（示例应显示您可以快速完成一些真正的工作。https://jqueryui.com/tooltip/ ）

您可以使用以下自定义Javascript

var div = document.querySelector('#[yourdivId]');
div.addEventListener('mouseenter', function(){
    var tooltip = document.getElementById(this.getAttribute("data-toggle"));
    tooltip.classList.remove("[yourHiddenClassName]");
})
div.addEventListener('mouseleave', function(){
    var tooltip = document.getElementById(this.getAttribute("data-toggle"));
    tooltip.classList.add("[yourHiddenClassName]");
})

或等效的JQuery，如下所示

$("#[yourdivId]").mouseenter(function() {
    var tooltipId = this.data("toggle");
    $("#" + tooltipId).show();
})
.mouseleave(function() {
     var tooltipId = this.data("toggle");
     $("#" + tooltipId).hide();
});