如何在工具提示上执行更改

Question

我想将div显示为另一个tooltip的{​​{1}}，我希望div或input fields上有一些Text Field Select box {1}}被视为div从最终用户获取值。如何使用Javascript或jQuery实现此功能？

Answer 1

好的，这有点复杂，但jsFiddle非常清楚地表明了这一点。

当您将鼠标悬停在任一图片上时，它会读取该类属性，并从中了解是否获取<select>或<input>元素的值。

jsFiddle Demo

$(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;}