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

检查此代码段

<强>更新

＆＃13;

$("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();
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

请按照以下步骤操作：

在新div中添加链接和工具提示div。
将tooltip div属性设置为visibility：hidden;
并在悬停时将此工具提示的属性设置为可见。

像： 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

您可以尝试在链接悬停时使用波形符选择器显示yout tooltip元素：

.tooltip { 
  display: none; 
} 

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

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

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

这里有一个pen工作地点

如何使用HTML表单制作丰富的工具提示

3 个答案: