如何在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中輕鬆插入工具提示？

回答

相關問題