Bootstrap 初始化之前无法调用工具提示上的方法

0g0grzrc  于 2023-02-06  发布在  Bootstrap
关注(0)|答案(6)|浏览(175)

我正在使用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");
}

我该怎么解决呢?请帮帮我。

laawzig2

laawzig21#

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

zpf6vheq

zpf6vheq2#

您需要防止jQueryUI库覆盖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>
rur96b6h

rur96b6h3#

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

eoigrqb6

eoigrqb64#

在工具提示小部件(例如.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语句采用的任何分支,该元素都将是工具提示小部件的示例

r7xajy2e

r7xajy2e5#

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

if ($(myelem).length > -1) {
    // do something
}
mdfafbf1

mdfafbf16#

在bootstrap.js之前声明jquery-ui.js还解决了我的
类型错误:elem. getClientRect不是位于jQuery.fn.init.offset的函数

相关问题