在特定元素上定位工具提示

时间:2014-02-18 22:48:26

标签: jquery jquery-ui

我有一个按钮(在#DTCOption部分中)按下时会产生一个工具提示:

<asp:LinkButton ID="lnkSelectOptions" data-icon="arrow-r" data-iconpos="right" runat="server" data-role="button" Class="custom-btn" data-inline="true" data-theme="c" data-transition="pop" UseSubmitBahavior="false" href="#" data-mini="true" OnClientClick="SelectOptions()" >GO</asp:LinkButton>
<div id="tooltip" style="display:none;">Please use valid options.</div>

按下按钮时,我会显示工具提示:

    function SelectOptions() {
            $('#tooltip').toggle();
    }

但工具提示并未显示我想要的位置。我正在尝试添加以下代码,以便正确定位但没有更改结果。

    $(document).on("pageshow", "#DTCOption", function () {
        $("#tooltip").tooltip({ position: { of: "#lnkSelectOptions", at: "right" } })
    });

我做错了什么?

1 个答案:

答案 0 :(得分:0)

我想知道这个FIDDLE是否会对你有帮助。

JS

    $('.tipme' ).tooltip({
                              show: { effect: "blind", duration: 800 },
                          position:
                                   {
                                    my: 'left center',
                                    at: 'right center'       
                                    }
    });

$('.buttondiv').click(function(){
      if ( $(".ui-tooltip").length > 0 )
       {
        $('.tipme').tooltip('close');
        }
        else
       {
        $('.tipme').tooltip('open');
        }
                                  });