我正在研究一个工具提示(在输入时显示其中的内容)。它在 chrome 上运行良好,但只是在我在 Mozilla Firefox 上测试它之前。工具提示位于 Chrome 浏览器中文本区域框的底部(这是我想要的),但在 Mozilla Firefox 中,它显示在某个随机位置,但所有文本区域的工具提示显示在同一随机位置聚焦文本区域。我知道这是一个 CSS 问题,但仍附上所有相关代码。
CSS
.tooltip
{
color:#0D776e;
font-size:15px;
font-family:calibri;
min-height:25px;
border-radius:4px;
margin:0 0.5%;
word-wrap:break-word;
display:none;
z-index:500;
width:200px;
position:absolute;
top:32px;
}
jQuery
$(document).ready(function()
{
$("textarea").focus(function()
{
var targetArea = $(this);
targetArea.siblings('div').fadeIn(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"}).html(targetArea.val());
});
$("textarea").blur(function()
{
var targetArea = $(this);
targetArea.siblings('div').fadeOut(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"});
});
$("textarea").keyup(function()
{
var targetArea = $(this);
targetArea.siblings('div').html(targetArea.val());
});
});