如何使用 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

检查这个sn-p

更新

$("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

按照以下步骤操作：

1. 在新 div 中添加链接和工具提示 div。
2. 将工具提示 div 属性设置为可见性：隐藏；
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;
}

Answer 3

您可以尝试在链接悬停时使用波浪号选择器显示您的工具提示元素：

.tooltip { 
  display: none; 
} 

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

然后将您的工具提示放在链接元素之后。

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

这里是pen 工作的地方