Cannot call methods on tooltip prior to initialization

Question

I am using jQuery tooltip for dynamic created row(can be 10 row/more row)

Tooltip is being display properly but close is not being properly.

Error is given below,

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");
}

How can i solve it? Please help me.

your error already explained it, you are calling the close method immediately on your else statement, and we can't help as we don't know where EXIT is coming from and the logic of your code — mamdouh alramadan, Nov 14 '13 at 05:27
Exist come from input validation. Exist come properly checking from database using ajax, when Exist does not come then will go else, i check via alert , it works properly. but when call display_tp_tooltip_close function and when has tooltip close, it's show promlem above. — MD. ABDUL Halim, Nov 14 '13 at 05:34
Ok, that make sense. Then, take a look at [this](http://stackoverflow.com/questions/13520139/jquery-ui-dialog-cannot-call-methods-on-dialog-prior-to-initialization) SO question and see the unaccepted answer posted by john. it might help. — mamdouh alramadan, Nov 14 '13 at 05:43

score 18 · Answer 1 · answered Sep 05 '17 at 18:24

18

I found that declaring bootstrap.js before jquery-ui.js in my caused the problem. Make sure that jquery-ui.js is declared before bootstrap.js.

answered Sep 05 '17 at 18:24

omarjebari

4,861
3
34
32

1

This was the problem for me too, but I can't get other stuff to work if I replace them :/ – Amine Jan 05 '18 at 19:56
1

that was it! :-) – Goran Usljebrka Oct 19 '18 at 09:57

score 10 · Answer 2 · answered Jan 31 '19 at 16:02

10

You'll need to prevent the jQuery UI library from overwriting jQuery.fn.tooltip.

So cache this value before loading the jQuery UI library, then restore it afterward:

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

answered Jan 31 '19 at 16:02

reformed

4,505
11
62
88

Having jquery-ui.js before bootstrap.js did not work me. Same error. However, this fix did. Thank you. – Ian GM Nov 13 '20 at 17:43

score 4 · Answer 3 · answered Mar 16 '18 at 13:41

4

Declare jquery-ui.js before the bootstrap.js

answered Mar 16 '18 at 13:41

George Henrique

253
2
4

score 2 · Answer 4 · answered May 24 '17 at 21:35

2

You can't call a method from the tooltip widget (e.g .tooltip('close') ) before the widget has been initialized, either with a call to .tooltip() or .tooltip({ })

You can prevent this error by testing that the DOM element is an instance of the tooltip widget:

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

Another option would be to move the call to $("#tp_no"+m).tooltip(); as the first thing inside your while(m < 10) loop to ensure that whichever branch your if statement takes, the element will be an instance of the tooltip widget

answered May 24 '17 at 21:35

Brett

579
3
10

Would that not be shorter as: `$("#tp_no"+m+" ui-tooltip").tooltip("close");` ? – ChrisFox Jun 25 '19 at 08:07
Thanks for .is(':ui-tooltip') – AnthonyVO Aug 12 '19 at 22:45

score 1 · Answer 5 · edited Feb 03 '23 at 16:28

1

I always check to see if the elements exists before calling close methods etc.

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

edited Feb 03 '23 at 16:28

reformed

4,505
11
62
88

answered Feb 13 '15 at 19:39

Judson Terrell

4,204
2
29
45

My problem was not that the element did not exist, but that the tooltip attached to it had not been initialised. @Brett's answer solved that for me. – ChrisFox Jun 25 '19 at 08:10

score 0 · Answer 6 · answered Jul 17 '18 at 20:08

0

Declaring jquery-ui.js before the bootstrap.js also solved my issue of

TypeError: elem.getClientRects is not a function at jQuery.fn.init.offset

answered Jul 17 '18 at 20:08

Mike

96
5

Cannot call methods on tooltip prior to initialization

6 Answers6