HTML/CSS/JS/jQuery 需要通过键控网格的工具提示

HTML/CSS/JS/jQuery Need a tooltip by keydown for a grid

本文关键字：网格 工具提示 JS CSS jQuery HTML      更新时间：2023-09-26

everyone.我正在处理一个包含图像列表的项目。用户可以滚动图像，然后按"输入"以显示工具提示，告诉他们有关其选择的更多信息。

我一直在研究工具提示，但它们似乎更适合使用鼠标，并且我无法获得修改的 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);

谢谢！

将此视为"初稿" - 小提琴。

div

中的图像，悬停在绝对位置的div 中会弹出其中的文本。

为了方便起见，我已经完成了"悬停"而不是"活动"（选择）。但是您可能可以采用这个概念并将其移动到"活动"div 或在其周围放置边框，并且"if border"更改 CSS。

.JS

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