我們通常這樣使用tooltip<button class="btn btn-success" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip On Right</button>這里我們?cè)跇?biāo)題部分添加詳細(xì)信息但我有很多詳細(xì)信息需要添加到標(biāo)題元素中，例如個(gè)人資料圖片、職稱、名字、姓氏等......所以，我無(wú)法在標(biāo)題中傳遞它還有其他選擇可以解決這個(gè)問(wèn)題嗎？目前，當(dāng)我將鼠標(biāo)懸停在該工具提示上時(shí)，它就會(huì)出現(xiàn)...我需要在單擊它后顯示它
2 回答
holdtom
TA貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超10個(gè)贊
您可以使用絕對(duì)值div，并在單擊按鈕時(shí)使用一點(diǎn) JavaScript 顯示/隱藏它。并將其放置在您想要的位置。
這是執(zhí)行此操作的“經(jīng)典”方法。沒(méi)有任何插件或庫(kù)。
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 關(guān)注
- 214 瀏覽
添加回答
舉報(bào)
0/150
提交
取消