如何将详细信息添加到工具提示而不是标题

Question

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

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

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

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

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

还有其他方法可以解决这个问题吗？

目前，当我将其悬停时，此工具提示会出现...单击它后我需要它显示

Answer 1

正如 cmets 所建议的，您应该使用 Popovers 而不是工具提示。

<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

Answer 2

您可以使用绝对的div 并在您使用一点点javascript 单击按钮时显示/隐藏它。并根据需要放置它。

这是执行此操作的“经典”方式。没有任何插件或库。

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

用户弹出框而不是 Tooltip 。查找文档here