Jquery - 在输入悬停时显示 div答案

【问题标题】：Jquery - show div on input hoverJquery - 在输入悬停时显示 div
【发布时间】：2021-03-14 11:37:02
【问题描述】：

我正在尝试制作一个不需要任何第三方代码的工具提示。我想用 jQuery & CSS 来做。它需要支持换行，并且只在悬停在输入元素上时显示。

如果可能，我不想向 HTML 页面添加额外的代码或向输入字段添加标题。

我创建了一个包含要显示的文本的对象，活动对象还将包含其他值。

tooltip = {
    'sitea':    { 'tip': 'Site A Hover' },
    'siteb':    { 'tip': 'Site A Hover' },
    'sitec':    { 'tip': 'Site A Hover' }
}

当我将鼠标悬停在输入上时，我想要一个 div 来显示来自对象的文本。到目前为止，我已经让悬停工作，但我不知道如何做 div 并仅在悬停时显示它。

$(":input").hover( function() {
    $(this).css('cursor','pointer')
    }, function() {
        $(this).css('cursor','auto');
    })

我找到了这个FIDDLE，它似乎适用于td，有没有办法用它来显示在输入上？

谢谢

【问题讨论】：

嗨，sitea ,siteb.. 是什么？输入ID？

标签： jquery hover

【解决方案1】：

试试下面这个：

将此添加到您的 css 文件中。

div:hover > .div-to-display {
    display: block
}

将此添加到 javascript 文件中：

$('div').append('<div class="div-to-display">yay</div>');

添加您要在其上显示工具提示的新 div 标签。

<div>newly added div tag (hover to diplay tooltip </div>

当然，您也可以根据需要添加 css 和更改工具提示。

【讨论】：

谢谢，但我想将鼠标悬停在 INPUT 而不是 DIV 上

【解决方案2】：

我用下面的小提琴让他工作：

http://jsfiddle.net/wjh6va8k/1/

css:

.tooltip {
    display: block
    border: 1px solid #000000;
    background-color: #008800;
    color: #ffffff;
    padding: 5px;
    border-radius: 3px;
}

$(":input").hover( function(e) {
      $('body').append('<div id="tooltip" class="tooltip">Tooltip<br>New line</div>').show()
    
    elmTop = $(this).offset().top + 10;
    elmWidth = $(this).width() + 10;
    
    $('#tooltip').css( 'position', 'absolute' );
    $('#tooltip').css( 'top', elmTop  );
    $('#tooltip').css( 'left', elmWidth );

})

谢谢

【讨论】：