如何对工具提示执行更改

How to perform changes on a ToolTip

本文关键字：执行 工具提示      更新时间：2023-09-26

我想将div显示为另一个div的tooltip，并将div上的一些input fields（如Text Field或Select box）作为tooltip，以从最终用户获取值。如何使用Javascript或jQuery实现此功能？

好吧，这有点复杂，但jsFiddle非常清楚地显示了这一点。

当您将鼠标悬停在任一图像上时，它将读取class属性，并从中知道是获取<select>还是<input>元素的值。

jsFiddle演示

$(document).on('mouseenter','img',function(){
    //Display tooltip of cell contents - uses #ttDiv
    t1 = this.className;
    tmp = $('#'+t1).val();
    t2 = 150;
    //$('#myOverlay').css({'background-color':'red'});
        ttDiv
        .stop(true,true)
        .dequeue()
        .html(tmp)
        .addClass('tlbInputTooltip')
        .css({'width' : t2+'px'})
        .fadeIn(200)
        ;
        ttDivON=1;
});
$(document).on('mouseleave','img',function(){
    ttDiv
    .stop(true,true)
    .dequeue()
    .html('')
    .removeClass('tlbInputTooltip')
    .fadeOut(200)
    ;
    ttDivON=0;
});

css：

#ttDiv{position:absolute;top:20px;left:100px;width:auto;padding:0 7px;background:wheat;display:none;z-index:2;}
.tlbInputTooltip{height:30px;width:auto;border:1px solid lightgrey;box-shadow:1px 1px 1px #000;display:inline-block;}
相关文章：