ツールチップを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はい私はそれを編集させてください –

@トニーTCG私はいくつかの例を追加しました –

角形の指示に基づいたライブラリが必要です。ツールチップのあらゆる部分は、使用の代わりに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に簡単に挿入するには？

答えて

関連する問題