我們通常這樣使用tooltip<button class="btn btn-success" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip On Right</button>這里我們在標題部分添加詳細信息但我有很多詳細信息需要添加到標題元素中，例如個人資料圖片、職稱、名字、姓氏等......所以，我無法在標題中傳遞它還有其他選擇可以解決這個問題嗎？目前，當我將鼠標懸停在該工具提示上時，它就會出現...我需要在單擊它后顯示它
2 回答
holdtom
TA貢獻1805條經驗 獲得超10個贊
您可以使用絕對值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>
- 2 回答
- 0 關注
- 204 瀏覽
添加回答
舉報
0/150
提交
取消