获取元素自己的tootip点击

时间:2015-09-25 10:29:40

标签: javascript jquery jquery-ui

我对jquery ui工具提示有疑问,

当我点击工具提示时,我想要工具提示所属的元素

我做的是

    $(".sample").tooltip({
           content: function () {
                return $(this).prop('title');
            },
        show: null, 
        position: {
            my: "center bottom-20",
            at: "center top",
            using: function( position, feedback ) {
              $( this ).css( position );
              $( "<div>" )
                .addClass( "arrow" )
                .addClass( feedback.vertical )
                .addClass( feedback.horizontal )
                .appendTo( this );
            }
          },
        close: function (event, ui) {

            ui.tooltip.hover(

            function () {
                $(this).stop(true).fadeTo(400, 1);
            },

            function () {
                $(this).fadeOut("400", function () {
                    $(this).remove();
                })
            });
            ui.tooltip.click(function(e){
                $(this).parent();
            });
        }
    });

当我在ui.tooltip.click的点击功能中取出父母时,它显示了身体,

元素就像这样

<span title="follow" class="sample"></span>

当我将鼠标悬停在此处时,我希望将结果“样本”作为结果

由于

2 个答案:

答案 0 :(得分:1)

您需要使用$(e.originalEvent.target)

close: function (event, ui) {
    var original = $(event.originalEvent.target);
    ui.tooltip.hover(

    function () {
        $(this).stop(true).fadeTo(400, 1);
    },

    function () {
        $(this).fadeOut("400", function () {
            $(this).remove();
        })
    });

    ui.tooltip.click(function () {
        console.log(original.text())
    });
}

Example fiddle

答案 1 :(得分:0)

也许你使用$(event.currentTarget)(事件是指关闭属性函数)

close: function (event, ui) {

        ui.tooltip.hover(

        function () {
            $(this).stop(true).fadeTo(400, 1);
        },

        function () {
            $(this).fadeOut("400", function () {
                $(this).remove();
            })
        });
        ui.tooltip.click(function(e){
            console.log($(event.currentTarget));
        });
}

小提琴https://jsfiddle.net/zvsjz6a0/