HTMLフォームで豊富なツールチップを作成する方法

Question

テキストの段落にリンクがあります。私は一番上にタイトルが付いた豊富なツールチップを作りたいと思っています。そして、リンクをホバリングする際に電子メールアドレスを収集するフィールドがあります。私はどのようなアプローチを取るべきですか？

私はツールチップライブラリを調べましたが、フォームサポートはありません。

<p>Pellentesque habitant <a href="#">Link to show tooltip</a> morbi senectus 
tristique senectus et netus et malesuada pellentesque habitant senectus 
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies 
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. 
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 

ツールチップの内容：：私はリンク内に置くと

が ​​

今、私が達成したい効果がある

リンクが存在している内容以下のコードを見つけてください。ツールチップのコンテンツがスタイル付きのdivに表示されるはずのコンテンツ。私はどうすればいいのですか？

Answer 1

チェック更新このスニペット

$("a").bind("mousemove", function(event) { 
 
    $("div.tooltip").css({ 
 
     top: event.pageY + 10 + "px", 
 
     left: event.pageX + 10 + "px" 
 
    }).show(); 
 
}) 
 
$('.close').bind('click', function(){ 
 
    $("div.tooltip").fadeOut(); 
 
});

body{ 
 
    font-family:arial; 
 
    font-size:12px; 
 
} 
 
.tooltip { 
 
    width:350px; 
 
    position:absolute; 
 
    display:none; 
 
    z-index:1000; 
 
    background-color:#CB5757; 
 
    color:white; 
 
    border: 1px solid #AB4141; 
 
    padding:15px 20px; 
 
    box-shadow: 0px 3px 2px #8D8D8D; 
 
    border-radius: 6px; 
 
} 
 
.close{ 
 
    right: 15px; 
 
    position: absolute; 
 
    background: #fff; 
 
    color: #555; 
 
    width: 20px; 
 
    height: 20px; 
 
    text-align: center; 
 
    line-height: 20px; 
 
    border-radius: 50%; 
 
    font-size: 10px; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
<p>Pellentesque habitant <a href="#">Link to show tooltip</a> morbi senectus 
 
    tristique senectus et netus et malesuada pellentesque habitant senectus 
 
    fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies 
 
    eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. 
 
    Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
 
</p> 
 
<div class="tooltip"> 
 
    <span class="close">X</span> 
 
    <h3>Tooltip title</h3> 
 
    <p>Vestibulum tortor quam, feugiat vitae, ultricies 
 
     eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. 
 
     Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
 
    </p> 
 
    <form> 
 
     <input type="email" placeholder="john@doe.com" /> 
 
     <input type="submit" value="subscribe" /> 
 
    </form> 
 
    <span class="branding">This is our branding message</span> 
 
</div>

Answer 2

あなたは、リンクのホバー上のチルダセレクターでyoutはtooltip要素を表示しようとすることができます：

.tooltip { 
    display: none; 
} 

a:hover ~ .tooltip{ 
    display: block; 
} 

そして、link要素の後に、あなたのツールヒントを配置します。ここで

<p> 
    blabla 
    <a href="#">hover me</a> 
    <span class="tooltip">tooltip content</span> 
    blabla 
</p> 

それは

Answer 3

フォロートンの作品penステップ：

1. 新しいdivにリンクとツールチップdivを追加します。
2. ツールチップのdivプロパティをvisibility：hiddenに設定します。
3. このホチキスのプロパティを表示するには、このツールチップのプロパティを設定します。

のように：HTML ：

<div class="link"> <a href="#">Link to show tooltip</a> 
<div class="tooltip"> ......</div> 
</div> 

CSS：

.link { 
position: relative; 
display: inline-block; 
border-bottom: 1px dotted black; 
} 

.link .tooltip { 
visibility: hidden; 
width: 120px; 
background-color: black; 
color: #fff; 
text-align: center; 
border-radius: 6px; 
padding: 5px 0; 

position: absolute; 
z-index: 1; 
} 

.link:hover .tooltip { 
visibility: invisible; 
}