Javascript HTML/CSS/JS/jQuery需要一个网格的工具提示

各位。我正在做一个有图片列表的项目。用户可以在图像上滚动，然后按“回车”以显示工具提示，告诉他们更多关于选择的信息

我一直在研究工具提示，但它们似乎更倾向于使用鼠标，我无法获得修改后的CSS工具提示代码，以便在选中时将信息放置在图像上

所以，我希望有人能指导我找到一种方法，可以通过按键弹出一个信息泡沫

function loatTooltip()
{
    $('.tooltip').remove(); 
    var name=contentName[navPosition][position.x]; 
    if(position.y>0) 
        name=contentName[navPosition][position.x+4]; 
    contentList[position.y][position.x].after('<div title="'+name+'" class="tooltip"></div>');
}

.tooltip { 
          display:block; 
          position: absolute; 
          width: 250px; 
          height: 120px; 
          background: #000000; 
          -webkit-border-radius: 10px; 
          -moz-border-radius: 10px; 
          border-radius: 10px; 
          left:5%; 
} 
.tooltip:after { 
          display:block; 
          content: attr(title); 
          position: absolute; 
          display: block; 
          width: 95%; 
          z-index: 99; 
          color:white; 
} 
content: attr(title);

函数loatTooltip（）
{
$（'.tooltip'）.remove（）；
var name=contentName[navPosition][position.x]；
如果（位置y>0）
name=contentName[navPosition][position.x+4]；
contentList[position.y][position.x]。在（“”）之后；
}
.工具提示{
显示：块；
位置：绝对位置；
宽度：250px；
高度：120px；
背景：#000000；
-webkit边界半径：10px；
-moz边界半径：10px；
边界半径：10px；
左：5%；
} 
.工具提示：在{
显示：块；
内容：attr（title）；
位置：绝对位置；
显示：块；
宽度：95%；
z指数：99；
颜色：白色；
} 
内容：attr（title）；

谢谢

将此视为“初稿”

图像在一个div中，悬停，一个绝对定位的div弹出，其中包含文本

我已经做了“悬停”和“不活跃”（选定），因为容易。但是你可以把这个概念移到一个“活动”的div，或者在它周围加一个边框，“如果边框”改变CSS

JS

---

我不知道你说“用户可以滚动图像，然后按“回车”打开工具提示”是什么意思。用户如何“滚动”图像？这是使用键盘键还是使用鼠标？@user3504898如果可能，发布

html

，

css

js

，“工具提示”文本。ThanksI有一个2D数组，作为图像网格的矩阵进行处理。当用户按下方向键时，“我的代码”会在新图像上移动一个选择窗口。选择此图像后，用户可以按enter键，此时会出现工具提示/对话框气泡，并提供有关图像的信息。现在，我可以看到一个工具提示，但它总是出现在同一个地方，这意味着它不会悬停在选定的图像上。这看起来就像我已经初始化的一样。使用您的示例，我在列表中添加了第二个图像。当我将光标移动到每个图像上时，会触发.hover事件，但工具提示显示在同一位置。我需要做什么才能使它出现在光标悬停的图像上？键是$（this），这意味着你要悬停在上面。然后将隐藏的div与每个图像关联，悬停时，将div显示为块。相对于悬停的div定位它。这是一个更新的fiddle——有三个图像，都是相同的，但描述不同。你可以改变弹出窗口相对于CSS中图像的位置。这就像我希望的那样工作！最后一个技巧是这样做，当用户用键盘而不是鼠标点击选择图像时，弹出窗口就会出现。这就是我现在在按下回车按钮时使用的功能。现在，当我使用它在图像周围绘制边框时，它会同步。但是，当我试图在同一个选定的图像上绘制工具提示类时，它不会以图像为中心。如果您编辑您的问题并将HTML和CSS放在其中如何？

$('.holder').hover(
    function(){
        $(this).children('div').css({ 'display': 'block',
                                 'background-color': 'red'});
    },
    function(){
        $(this).children('div').css('display', 'none');
    }
    );