文章/答案/技术大牛

发布

社区首页 >问答首页 >引导3工具提示闪烁

问引导3工具提示闪烁
EN

Stack Overflow用户

提问于 2017-10-21 16:59:17

回答 2查看 952关注 0票数 1

我有一个带工具提示的引导带3按钮。单击该按钮时，工具提示显示，然后淡出。当第二次点击时，工具提示会闪烁，不会很好地褪色。但是当第三次点击时，行为又像预期的那样。

更新：下面的代码可以很好地用于引导3.0.0，但对引导3.3.7不起作用。

$('[data-toggle="tooltip"]').tooltip({
  trigger: 'click',
  placement: 'bottom'
});

function setTooltip(node, message) {
  node.attr('data-original-title', message)
    .tooltip('show');
}

function hideTooltip(node) {
  setTimeout(function() {
    node.tooltip('hide');
  }, 1000);
}

$('.btn').on('click', function() {
  var node = $(this);
  var msg = node.attr('data-title');
  setTooltip(node, msg);
  hideTooltip(node);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<button type='button' class='btn btn-primary' data-title='Tooltip' data-toggle='tooltip'>Click me</button>

twitter-bootstrap

javascript

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-10-21 17:20:50

您应该使用trigger: 'manual'，以便控制工具提示的显示或隐藏方式。

$('[data-toggle="tooltip"]').tooltip({
  trigger: 'manual',
  placement: 'bottom'
});

function showTooltip(node) {
  node.tooltip('show');
}

function hideTooltip(node) {
  setTimeout(function() {
    node.tooltip('hide');
  }, 1000);
}

$('.btn').on('click', function() {
  var node = $(this);
  showTooltip(node);
  hideTooltip(node);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<button type="button" class="btn btn-primary" data-title="Tooltip" data-toggle="tooltip">Click me</button>

票数 2

Stack Overflow用户

发布于 2017-10-21 17:24:50

给你一个解决办法

$('.btn').on('click', function() {
  var node = $(this);
  var msg = node.attr('data-title');
  node.attr('data-original-title', msg)
    .tooltip('show');
  setTimeout(function() {
    node.tooltip('hide');
  }, 1000);
});

$('.btn').on('mouseleave', function() {
  $(this).tooltip('hide');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type='button' class='btn btn-primary' data-placement='bottom' data-title='Tooltip' data-toggle='tooltip' data-trigger='manual'>Click me</button>

希望这能帮到你

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46865737

复制

相似问题

问引导3工具提示闪烁
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导3工具提示闪烁EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导3工具提示闪烁
EN