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

问题描述：

我有一段带有链接的文本。我想制作一个顶部带有标题的丰富工具提示，并在悬停链接时出现收集电子邮件地址的字段。我应该采取什么方法？如何使用其中的HTML表单制作丰富的工具提示

我已经看过工具提示库，但似乎没有任何形式的支持。请在下面找到

内容，链接存在的代码：

<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中的内容。我应该怎么做？

听起来很糟糕的可访问性，有些人不能使用鼠标非常好，他们需要按住鼠标在直接移动到工具提示的同时悬停在要素上。另外，它会在触摸设备上工作吗？ – jedifans

答

检查这个片段

更新

$("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="[email protected]" /> 
 
     <input type="submit" value="subscribe" /> 
 
    </form> 
 
    <span class="branding">This is our branding message</span> 
 
</div>

如何将鼠标移动到工具提示中输入数据？ – Zze

你是对的。我已经更新了答案 –

@HiteshMisro谢谢了。正是我需要的。 –

答

你可以尝试与链接悬停波浪选择器显示YOUT提示元素：

.tooltip { 
    display: none; 
} 

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

，然后将你的提示链接元素之后。

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

这里一个pen它的工作原理

在发布之前您是否自己测试过？ – Shaggy

对不起，我的手机。将更新:) – p1n5u

答

关注ŧ这些步骤：

将链接和工具提示div添加到新div中。
将tooltip div属性设置为可见性：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; 
}

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

相关推荐