tooltip 相关问题

我有一个包含工具提示和工具提示文本类的文档。当我使用 class=tooltip 定义或时，工具提示文本出现在封闭的容器上方，而不是 di... 我有一个包含工具提示和工具提示文本类的文档。当我使用 class=tooltip 定义或时，工具提示文本出现在封闭的容器上方，而不是直接在文本上方。 <!DOCTYPE HTML> <html lang=en> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <TITLE>favorite things</TITLE> <META name="KEYWORDS" CONTENT="filk"> <style> p { left:20%; position:relative; right:-20%; text-indent:2em; width:60%; } p.drop { text-indent:2em; } p.drop::first-letter { font-size:2em; text-indent:-2em; } a.L,div.L,span.L { display:inline; width:14%; position:absolute; left:-20%; } a.R,div.R,span.R { display:inline; width:14%; position:absolute; right:00%; } h1 { text-align:center; font-size:4em; } img.V { display:block; margin:10% 10% 10% 10%; max-width:90%; width:100%; } /* Tooltip container */ .tooltip { border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ } /* Tooltip text */ .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; /* Position the tooltip text */ position: absolute; z-index: 1; bottom: 102%; left: 10%; margin-left: -40px; Min-width: 20em; max-width: 70em; /* Fade in tooltip */ opacity: 0; transition: opacity 0.3s; } .L .tooltiptext { left: 10%; text-align: left; } .R .tooltiptext { left: -50%; text-align: left; } /* Tooltip arrow */ /* left: 15%; */ .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .L .tooltiptext::after { left: 15%; } .R .tooltiptext::after { left: 30%; } /* Show the tooltip text when you mouse over the tooltip container */ .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } .verse { font-size: 2em; text-align: center; width:60% } </style> </head> <BODY LANG="en-US" DIR="LTR"> <H1>My favorite things</H1> [Verse] Gardening <a class=tooltip href="https://en.wikipedia.org/wiki/Ungoliant"> spiders Ungoliant, who took the form of a giant spider and, along with Dark Lord Melkor, destroyed the Two Trees of Valinor </a> <a class=L href="https://en.wikipedia.org/wiki/The_Silmarillion"> <img class=V src="../Images/Silmarillion.png" alt="The Silmarillion"> </a> <a class=R href="https://en.wikipedia.org/wiki/The_Fellowship_of_the_Ring"> <img class=V src="https://upload.wikimedia.org/wikipedia/en/8/8e/The_Fellowship_of_the_Ring_cover.gif" alt="The Fellowship of the Ring"> </a> And <a class=tooltip href="https://en.wikipedia.org/wiki/Middle-earth_weapons_and_armour#Narsil"> swords that are broken Elendil's sword Narsil, called <q>The Sword that was Broken</q> after its damage in a battle against Sauron, and later caried by Aragorn (<q>Strider</q>). </a> Words in the <a class=tooltip href="https://en.wikipedia.org/wiki/Black_Speech"> Black Speech The Black Speech of Mordor is a language constructed by Sauron. </a> That must not be spoken <a class=tooltip href="https://en.wikipedia.org/wiki/Denethor"> Unfaithful stewards Denethor, the 26th ruling Steward of Gondor. </a> <a class="L tooltip" href="https://en.wikipedia.org/wiki/The_Return_of_the_King"> <img class=V src="../Images/81UzbZbGPUL._SL1500_.jpg" alt="The Return of the King"> Denethor, the 26th ruling Steward of Gondor. </a> Who don't want their kings These are a few of My favorite things. </BODY> </HTML> 次要问题是箭头太宽了我尝试制作 .tooltip display: inline-block，但这在渲染中引入了无关的空间。 <!DOCTYPE HTML> <html lang=en> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <TITLE>favorite things</TITLE> <META name="KEYWORDS" CONTENT="filk"> <style> p { left:20%; position:relative; right:-20%; text-indent:2em; width:60%; } p.drop { text-indent:2em; } p.drop::first-letter { font-size:2em; text-indent:-2em; } a.L,div.L,span.L { display:inline; width:14%; position:absolute; left:-20%; } a.R,div.R,span.R { display:inline; width:14%; position:absolute; right:00%; } h1 { text-align:center; font-size:4em; } img.V { display:block; margin:10% 10% 10% 10%; max-width:90%; width:100%; } /* Tooltip container */ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ } /* Tooltip text */ .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; /* Position the tooltip text */ position: absolute; z-index: 1; bottom: 102%; left: 10%; margin-left: -40px; Min-width: 20em; max-width: 70em; /* Fade in tooltip */ opacity: 0; transition: opacity 0.3s; } .L .tooltiptext { left: 10%; text-align: left; } .R .tooltiptext { left: -50%; text-align: left; } /* Tooltip arrow */ /* left: 15%; */ .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .L .tooltiptext::after { left: 15%; } .R .tooltiptext::after { left: 30%; } /* Show the tooltip text when you mouse over the tooltip container */ .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } .verse { font-size: 2em; text-align: center; width:60% } </style> </head> <BODY LANG="en-US" DIR="LTR"> <H1>My favorite things</H1> [Verse] Gardening <a class=tooltip href="https://en.wikipedia.org/wiki/Ungoliant"> spiders Ungoliant, who took the form of a giant spider and, along with Dark Lord Melkor, destroyed the Two Trees of Valinor </a> <a class=L href="https://en.wikipedia.org/wiki/The_Silmarillion"> <img class=V src="../Images/Silmarillion.png" alt="The Silmarillion"> </a> <a class=R href="https://en.wikipedia.org/wiki/The_Fellowship_of_the_Ring"> <img class=V src="https://upload.wikimedia.org/wikipedia/en/8/8e/The_Fellowship_of_the_Ring_cover.gif" alt="The Fellowship of the Ring"> </a> And <a class=tooltip href="https://en.wikipedia.org/wiki/Middle-earth_weapons_and_armour#Narsil"> swords that are broken Elendil's sword Narsil, called <q>The Sword that was Broken</q> after its damage in a battle against Sauron, and later caried by Aragorn (<q>Strider</q>). </a> Words in the <a class=tooltip href="https://en.wikipedia.org/wiki/Black_Speech"> Black Speech The Black Speech of Mordor is a language constructed by Sauron. </a> That must not be spoken <a class=tooltip href="https://en.wikipedia.org/wiki/Denethor"> Unfaithful stewards Denethor, the 26th ruling Steward of Gondor. </a> <a class="L tooltip" href="https://en.wikipedia.org/wiki/The_Return_of_the_King"> <img class=V src="../Images/81UzbZbGPUL._SL1500_.jpg" alt="The Return of the King"> Denethor, the 26th ruling Steward of Gondor. </a> Who don't want their kings These are a few of My favorite things. </BODY> </HTML> 我不明白为什么，但似乎是text-indent触发了问题；将其更改为margin-left解决了问题。

css tooltip

回答 1 投票 0

如何在多行文本选择的中心对齐工具提示

我需要在文本选择的中心对齐工具提示。这是我到目前为止获得正确位置的代码： const getTooltipPosition = () => { 常量选择 = window.getSele ...

javascript html css reactjs tooltip

回答 0 投票 0

如何防止工具提示在表格中创建垂直滚动条？

我创建了一个表格，其中嵌入了工具提示。在表格底部附近，工具提示悬停的长度会在表格中创建一个永久的垂直滚动条以适合工具提示。但是我想要

css tooltip overflow z-index css-tables

回答 0 投票 0

如何设置 MUI 工具提示的样式？

如何设置 MUI 工具提示文本的样式？悬停时的默认工具提示是黑色的，没有文字换行。是否可以更改背景、颜色等？这个选项甚至可用吗？