如何将详细信息添加到标题以外的工具提示

Question

我们通常这样使用工具提示

<button class="btn btn-success" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip On Right</button>

这里我们在标题部分添加细节

但是我有很多细节需要添加到标题元素中，例如个人资料图片、职务、名字、姓氏等...

所以，我无法在标题中传递它

还有其他解决办法吗？

目前，当我悬停它时，这个工具提示就会出现...我需要它在我点击它时显示

Answer 1

用户弹出窗口而不是工具提示。查找文档 here

Answer 2

您可以使用绝对 div 和 show/hide 当您使用一点点 javascript 单击按钮时。并根据需要放置它。

这是一种 'classic' 方法。没有任何插件或库。

const button = document.getElementById('tooltip-btn');

button.onclick = function() {
const tooltip = document.getElementById('tooltip-content');
  tooltip.style.display === 'none' ?
  tooltip.style.display = 'inline-block ' : tooltip.style.display = 'none'
  }

div#tooltip-content {
  background-color: grey;
  border-radius: 10px;
  padding: 10px;
  position:absolute;
  left:80px;
  top:25px;
 
}

.tooltip-wrapper {
  position:relative;
}

<div class="tooltip-wrapper">
  <button id="tooltip-btn" class="btn btn-success">Tooltip On Right</button>
  <div id="tooltip-content" style="display:none">
    <h2>SOme title</h2>
    <p>Some text here Some text here Some text here </p>
    <a href="#"> Link here</a>
  </div>
</div>

Answer 3

正如评论中所建议的那样，您应该使用弹出框而不是工具提示。

<link href="https://getbootstrap.com/docs/4.4/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/docs/4.4/dist/js/bootstrap.bundle.min.js"></script>
<script>
  $(function() {
    $('[data-toggle="popover"]').popover()
  })
</script>
<h1>Popover Example</h1>
<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Popover title" data-content="Popove`enter code here`r content. example content for popover">Click to toggle popover</button>

您还可以 HTML 选项来添加更灵活的内容。

参考：Bootstrap Popovers Docs

如何将详细信息添加到标题以外的工具提示

How to add details to tooltip other than title

html

css

bootstrap-4

popover