如何制作包含 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 class="tooltip">
  <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>

现在我想要实现的效果是当我将链接悬停在内容中时，工具提示内容应该出现在样式化的 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>