如何在HTML中轻松插入工具提示？

有没有人知道如何在HTML中插入短语的工具提示，因为您在写入时没有太多的代码？如何在HTML中轻松插入工具提示？

这个想法是，它不应该是一个巨大的代码块，但相对较短，并且可以轻松插入。

一个假想的例子：<p> This is a <tooltip-data="A yellow fruit"> bananna </tooltip> </p>

的目的是当你写了一篇文章，添加工具提示解释什么单词或短语的意思为，但不要求很大的努力，或采取在代码太多空间。

我发现的一个替代方法是this，但它是一个巨大的代码块，它占用了大量的空间，我也不知道如何将它应用到几个短语中，似乎您需要为每个添加一个div您想要展示的工具提示。

而且我已经知道<a href="#" title="A yellow fruit"> Bannana </a>但它不支持样式，并且不会显示在手机上。

来源

2016-12-06 Tony TCG

看看这个。

<html> 
 
<style> 
 
    .tooltip { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-bottom: 1px dotted black; 
 
    } 
 
    .tooltip .tooltiptext { 
 
    visibility: hidden; 
 
    width: 120px; 
 
    background-color: #555; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 5px 0; 
 
    position: absolute; 
 
    z-index: 1; 
 
    bottom: 125%; 
 
    left: 50%; 
 
    margin-left: -60px; 
 
    opacity: 0; 
 
    transition: opacity 1s; 
 
    } 
 
    .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; 
 
    } 
 
    .tooltip:hover .tooltiptext { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    } 
 
</style> 
 

 
<body style="text-align:center;"> 
 

 
    <h2>Tooltip</h2> 
 
    <p>Move the mouse over the text below:</p> 
 

 
    <div class="tooltip">Hover over me 
 
    <span class="tooltiptext">Tooltip text</span> 
 
    </div> 
 
    <br/> 
 
    <br/> 
 
    <div class="tooltip">Hover over me2 
 
    <span class="tooltiptext">Tooltip text again</span> 
 
    </div> 
 
    <br/> 
 
    <br/> 
 
    <div class="tooltip">Hover over me3 
 
     <p class="tooltiptext">Tooltip text</p> 
 
    </div> 
 
    <br/> 
 
    <br/> 
 
    <div class="tooltip">Hover over me 
 
     <h1 class="tooltiptext">Tooltip text</h1> 
 
     </div> 
 
    <br/> 
 
    <br/> 
 
    <div class="tooltip">Hover over me 
 
     <h2 class="tooltiptext">Tooltip text</h2> 
 
     </div> 
 
</body> 
 

 
</html>

这是W3schools礼貌。只需注意，那里的所有css都没有必要，你只需要一些让工具提示实际工作

来源

2016-12-06 04:18:56

你能举一个这样的例子有显示了多个短语多个提示一个段落？ –

@Tony TCG是让我编辑它 –

@Tony TCG我添加了一些例子 –

你需要的是基于Angular-like指令的库。工具提示的每个方面都可以用html直接描述，而不是用法。看一看：使用的 https://angular-ui.github.io/bootstrap/#/popover

例子：

<button uib-popover="I appeared on mouse enter!" 
popover-trigger="'mouseenter'" type="button">Mouseenter</button>

来源

2016-12-06 04:26:43

请试试这个。

.tooltip { 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 

 
.tooltip:after { 
 
    position: absolute; 
 
    background: rgba(140,180,140,.5); 
 
    content: attr(data-tooltip);  
 
    bottom: 100%; 
 
    left: 0; 
 
    max-width: 200px; 
 
    opacity: 0; 
 
    transition: all ease .3s; 
 
    padding: 5px; 
 
    border-radius: 7px; 
 
} 
 

 
.tooltip:hover:after { 
 
    opacity: 1; 
 
}

<h1>Tooltip Example</h1> 
 
<div class="tooltip" data-tooltip="My tips"> 
 
    Hover over me 
 
<div>

来源

2016-12-06 05:41:10 Nooh

当我将鼠标悬停在它上面时，它不起作用@Nooh –

它适用于我.. – Nooh

如何在HTML中轻松插入工具提示？

回答

相关问题