Невозможно вызвать методы всплывающей подсказки перед инициализацией

Я использую всплывающую подсказку 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");
}

Как я могу это решить? Пожалуйста, помогите мне.

Ответы

Ответ 1

Я обнаружил, что объявление bootstrap.js перед jquery-ui.js в моем вызвало проблему. Перед загрузкой bootstrap.js убедитесь, что jquery-ui.js.

Ответ 2

Объявите jquery-ui.js перед загрузкой bootstrap.js

Ответ 3

Я всегда проверяю, существуют ли элементы до вызова методов close и т.д.

Если ($ (myelem).length > -1) что-то делать

Ответ 4

Вы не можете вызывать метод из виджета всплывающей подсказки (например, .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, элемент будет экземпляром виджета всплывающей подсказки

Ответ 5

Объявление jquery-ui.js до bootstrap.js также решило мою проблему

Ошибка типа: elem.getClientRects не является функцией в jQuery.fn.init.offset

Ответ 6

Вам нужно будет запретить библиотеке jQuery UI перезаписывать jQuery.fn.tooltip.

Поэтому кэшируйте это значение перед загрузкой библиотеки пользовательского интерфейса jQuery, а затем восстановите его:

<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>