我使用的網站有一個富文本框，可以直接訪問底層 HTML 代碼。我可以編輯 HTML 代碼，但是當我保存它時，網站會進行干預。<style>元素消失了，但元素仍然存在<div>并且<span>似乎保留了它們的所有屬性。
我希望某個<span>元素在懸停時顯示工具提示。我考慮過使用該title屬性（它有效），但它對我的需要不夠靈活。
是否有可能（以及如何）在沒有元素的情況下實作此處所示的工具提示，僅使用和元素的屬性？我正在考慮諸如 、 和 之類的屬性，但請隨意建議您認為合適的其他屬性。<style><div><span>styleonmouseoveronmouseout
uj5u.com熱心網友回復：
因此，假設您無法在頁面加載中包含單獨的 css 或 js，我想出了僅適用于 html 的東西：
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h2>Top Tooltip w/ Bottom Arrow</h2>
<div style="position: relative;
display: inline-block;
border-bottom: 1px dotted black;"
onmouseover="tooltip.style.visibility='visible'"
onmouseout="tooltip.style.visibility='hidden'">Hover over me
<span id="tooltip" style="visibility: hidden;">
<span style="width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;">Tooltip text</span>
<span style="content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;"></span>
</span>
</div>
uj5u.com熱心網友回復：
有了這個，您只需將hovertip屬性添加到任何元素，如<p hovertip="tip">hover this</p>.
var tooltip = document.getElementById("tooltip");
document.addEventListener("mousemove", (e) => {
elementMouseIsOver = document.elementFromPoint(e.clientX, e.clientY);
if (elementMouseIsOver !== null) {
if (elementMouseIsOver.getAttribute("hovertip") == null) {
tooltip.style.display = "none";
tooltip.innerText = "";
} else {
tooltip.style.display = "block";
tooltip.innerText = elementMouseIsOver.getAttribute("hovertip");
};
};
tooltip.style.top = e.clientY "px";
tooltip.style.left = e.clientX "px";
});#tooltip {
border-radius: 5px;
padding: 5px;
background-color: darkslategray;
opacity: 0.9;
color: white;
position: fixed;
left: 0px;
top: 0px;
display: none;
pointer-events: none;
}<div id="tooltip"></div>
<textarea hovertip="asdb"></textarea><br>
<p>wqe qwej jiofdas jare oias. dgf <span hovertip="the tooltip" style="text-decoration: underline;">gfrsd</span> sfgd ho, sfdg sdfr ert asd.</p>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/416460.html
標籤：
下一篇：外部點擊下拉選單未關閉