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

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');&nbsp; tooltip.style.display === 'none' ?&nbsp; tooltip.style.display = 'inline-block ' : tooltip.style.display = 'none'&nbsp; }div#tooltip-content {&nbsp; background-color: grey;&nbsp; border-radius: 10px;&nbsp; padding: 10px;&nbsp; position:absolute;&nbsp; left:80px;&nbsp; top:25px;&nbsp;}.tooltip-wrapper {&nbsp; position:relative;}<div class="tooltip-wrapper">&nbsp; <button id="tooltip-btn" class="btn btn-success">Tooltip On Right</button>&nbsp; <div id="tooltip-content" style="display:none">&nbsp; &nbsp; <h2>SOme title</h2>&nbsp; &nbsp; <p>Some text here Some text here Some text here </p>&nbsp; &nbsp; <a href="#"> Link here</a>&nbsp; </div></div>

Answer 2

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