<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<span title="Hello world!">Hover this text to see the result.</span>
</body>
</html>
我有很多資訊要放在懸停文本中，當我縮小螢屏時，我的文本超出了螢屏（它沒有回應）。有沒有辦法可以在標簽中添加樣式？我嘗試創建一個工具提示類，但由于專案結構，我無法看到標簽本身。
我可以添加style=display:block;或類似的東西嗎？
我試過這種方式，這讓我的標簽消失了
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<style>
.tooltip {
position: relative;
}
.tooltip:before {
content: attr(data-text);
position: absolute;
top: 50%;
left: 100%;
margin-left: 15px;
width: 600px;
padding: 10px;
border-radius: 10px;
background: #000;
color: #fff;
text-align: justify;
display: none; /* hide by default */
}
.tooltip:hover:before {
display: block;
}
</style>
<body>
<span title="Hello world!">
<label for="my lable"><span class="tooltip" data-text="<custom:config bundleObj=""some text here" key="the key" />">
</span>
</body>
</html>
<custom:config bundleObj=""some text here" key="the key" />有一些翻譯路徑。
uj5u.com熱心網友回復：
CSS 可以通過 3 種方式添加到 HTML 檔案中：
行內 - 通過在 HTML 元素中使用 style 屬性
內部 - 通過使用部分中的元素
外部 - 通過使用元素鏈接到外部 CSS 檔案
出于您的目的，您將執行以下操作：
<p style="property:value;">Some text</p>
<h1 style="color:blue;">A Blue Heading</h1>
etc...
更新：
請記住，這不會解決您需要使用的網站本身的回應能力問題CSS Media Queries：
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
更新 2（樣式標題屬性）：
有一個純粹的CSS解決方案，通過設定CSS attr運算式、生成的內容和屬性選擇器（這表明它可以追溯到 IE8）：
span[title]:hover::after {
content: attr(title);
position: absolute;
top: -100%;
left: 0;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/526173.html
標籤：html徘徊工具提示