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

Question

我们通常这样使用tooltip<button class="btn btn-success" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip On Right</button>这里我们在标题部分添加详细信息但我有很多详细信息需要添加到标题元素中，例如个人资料图片、职称、名字、姓氏等......所以，我无法在标题中传递它还有其他选择可以解决这个问题吗？目前，当我将鼠标悬停在该工具提示上时，它就会出现...我需要在单击它后显示它

Answer 1

您可以使用绝对值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 2

用户弹出窗口而不是工具提示。