14

我正在为动态创建的行使用 jQuery 工具提示（可以是 10 行/更多行）

工具提示正在正确显示，但关闭不正确。

错误如下，

Error: cannot call methods on tooltip prior to initialization; attempted to call method 'close'

throw new Error( msg );

while(m < 10){

  .......................................
  .......................................

  if(data =="EXIST")
  {
    display_tp_tooltip(m);
    $("#tp_no"+m).val("");
  }
  else
  {
    display_tp_tooltip_close(m);
  }
}

function display_tp_tooltip(m)
{
   $("#tp_no"+m).tooltip();
   $("#tp_no"+m).tooltip({
        open: function (e, o) {
        o.tooltip.animate({ top: o.tooltip.position().top + 10 }, "fast" );
        $(o.tooltip).mouseover(function (e) {
            $("#tp_no"+m).tooltip('close');
        });
        $(o.tooltip).mouseout(function (e) {});
        },

        position: {
        my: "center bottom-20",
        at: "center top",
        using: function( position, feedback ) {
            $( this ).css( position );
            $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .append($('<style>.ui-tooltip,.arrow:after { background:red; }</style>'))
            .appendTo( this );
          }
        },
        content: function() { return cellTpNoTooltipContent()},
        close: function (e, o) {},
        show: {
          duration: 800
        }

   });

   $("#tp_no"+m).tooltip('open');
       setTimeout(function () {
       $(this).tooltip('close'); //close the tooltip
       }, 3000);
}

function cellTpNoTooltipContent()
{
  var rval = "T.P No. is exist";
  return rval;
}

function display_tp_tooltip_close(m)
{
  $("#tp_no"+m).tooltip("close");
}

我该如何解决？请帮我。

4

6 回答 6

17

我发现在我的 jquery-ui.js 之前声明 bootstrap.js 导致了这个问题。确保 jquery-ui.js 在 bootstrap.js 之前声明。

于 2017-09-05T18:24:45.417 回答
7

您需要防止 jQuery UI 库覆盖jQuery.fn.tooltip.

所以在加载 jQuery UI 库之前缓存这个值，然后再恢复它：

<script>
    let _tooltip = jQuery.fn.tooltip; // <--- Cache this
</script>
<script src="/path/to/jquery-ui.min.js"></script> <!-- load jQuery UI -->
<script>
    jQuery.fn.tooltip = _tooltip; // <--- Then restore it here
</script>
于 2019-01-31T16:02:09.163 回答
4

在 bootstrap.js 之前声明 jquery-ui.js

于 2018-03-16T13:41:09.483 回答
2

在小部件初始化之前，您不能从工具提示小部件（例如.tooltip('close')）调用方法，无论是调用.tooltip()或.tooltip({ })

您可以通过测试 DOM 元素是否是工具提示小部件的实例来防止此错误：

if($("#tp_no"+m).is(':ui-tooltip')){
  $("#tp_no"+m).tooltip("close");
}

另一种选择是将调用移动到循环$("#tp_no"+m).tooltip();中的第一件事while(m < 10)，以确保无论您的 if 语句采用哪个分支，该元素都将是工具提示小部件的实例

于 2017-05-24T21:35:56.740 回答
0

我总是在调用 close 方法等之前检查元素是否存在。

if($(myelem).length > -1) 做某事

于 2015-02-13T19:39:38.793 回答
0

在 bootstrap.js 之前声明 jquery-ui.js 也解决了我的问题

TypeError：elem.getClientRects 不是 jQuery.fn.init.offset 的函数

于 2018-07-17T20:08:19.350 回答