Question

所以我有一段时间没有这个问题了，我无法弄清楚如何进行工具提示切换。在网站中，有时会有一个涉及工具提示的教程，用于解释网站的功能或如何使用它。我一直试图在自己的网站上这样做

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

所以我做了一个工具提示，但是我无法弄清楚如何在没有悬停的情况下使其成为工具提示...是否有一个特定的属性我可以在div上切换以使工具提示出现而用户不会悬停在DIV？谢谢！（工具提示是内置的HTML。在我的网站上，我使用额外的引导程序模板使它们看起来更好。）

RECAP：我想要实现的是一个工具提示，可以在某个功能运行时显示，并在另一个功能运行时隐藏。我无法理解这一点，因为其他网站上的所有示例都要求用户悬停或点击按钮或其他操作。

Answer 1

引导程序中的工具提示是“选择加入”＆＃39;项目 - 意思是，你需要自己启用它们 -

见下文：

<强>更新

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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();
  });

.hide()和.show() jQuery函数只是切换元素的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();
});

使用JavaScript / JQuery

3 个答案: