引导工具提示在点击时显示,但在鼠标移出时隐藏

Posted

技术标签:

【中文标题】引导工具提示在点击时显示,但在鼠标移出时隐藏【英文标题】:Bootstrap tooltip to show on click but hide on mouse out 【发布时间】:2021-05-30 21:35:59 【问题描述】:

我有一个将文本复制到剪贴板的按钮,当用户单击该按钮以指示文本已成功复制时,我需要显示引导工具提示。

<a onclick="copyText()" role="button" data-toggle="tooltip" data-theme="dark" data-trigger="click" title="Link Copied">
    <i class="fas fa-share-alt"></i>
</a> 

但是我不希望用户再次单击按钮来隐藏工具提示,因为这会不必要地再次复制文本。相反,我只想在用户点击离开或将光标移出按钮时隐藏工具提示。

有可能吗?

【问题讨论】:

【参考方案1】:

您可以使用 Bootstrap MethodsEvents API,如下所示。

function copyText() 
  // do something...


$(function() 
  $('[data-toggle="tooltip"]').tooltip();
  $('[data-toggle="tooltip"]').on('show.bs.tooltip', function() 
    $(this).on('mouseleave', function() 
      $(this).tooltip('hide');
    );
  );
);
body 
  padding: 3rem
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<a onclick="copyText()" role="button" data-toggle="tooltip" data-theme="dark" data-trigger="click" title="Link Copied">
  <i class="fas fa-share-alt"></i>
</a>

<hr>

<h4>It supports multiple elements</h4>

<a onclick="copyText()" role="button" data-toggle="tooltip" data-theme="dark" data-trigger="click" title="Link Copied">
  <i class="fas fa-share-alt"></i>
</a>
<a onclick="copyText()" role="button" data-toggle="tooltip" data-theme="dark" data-trigger="click" title="Link Copied">
  <i class="fas fa-share-alt"></i>
</a>
<a onclick="copyText()" role="button" data-toggle="tooltip" data-theme="dark" data-trigger="click" title="Link Copied">
  <i class="fas fa-share-alt"></i>
</a>

【讨论】:

谢谢,效果很好。但我失去了黑暗主题的工具提示。不知道为什么! 其实我意识到我们不需要tooltip()方法来打开tooltip。我刚刚评论了$('[data-toggle="tooltip"]').tooltip(); 这一行,它与data-trigger 配合得很好,它以深色主题显示。 如果没有触发器,通常你应该使用这个$('[data-toggle="tooltip"]').tooltip();。如果您引用了data-trigger,则无论如何都不需要它。一切都好吗?

以上是关于引导工具提示在点击时显示,但在鼠标移出时隐藏的主要内容,如果未能解决你的问题,请参考以下文章

extjs4 在按钮单击而不是鼠标悬停时显示工具提示

鼠标经过图片时图片上出现文字,鼠标移出时隐藏(通俗版) -《狗嗨默示录》-

Swing:鼠标悬停时显示/隐藏按钮

将鼠标悬停在工具提示区域上的工具提示指令

Twitter Bootstrap 选项卡:在悬停时显示,在鼠标输出时隐藏

jQuery:鼠标悬停时淡入图像,鼠标移出时淡出