Callout Function throws error: Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null

[txshan]

Copied and pasted the exact callout code from the Hopscotch demo to test in my page

var calloutMgr = hopscotch.getCalloutManager();
calloutMgr.createCallout({
  id: 'attach-icon',
  target: 'attach-btn',
  placement: 'bottom',
  title: 'Now you can share images & files!',
  content: 'Share a project you\'re proud of, a photo from a recent event, or an interesting presentation.'
});

this results in Chrome throwing errors: Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null

and

Uncaught Error: Callout by that id already exists. Please choose a unique id.

[kate2753]

Thank you for the issue report @txshan . This issue is happening because element that you have specified in target option does not exist on the page, hence Hopsoctch does not know where to position the callout.

This exception is not helpful though, since it's not telling you what actually happened. I'll add this issue to our 0.2.5 milestone, to make sure that error message of the exception is more descriptive.

[txshan]

Hi @kate2753 ,

Thanks for your feedback. However, the element does exist on the page and is still throwing the error. I tried this with my own callout for my client project as well. I have had no issues with the typical tour, but receive this error with every callout instance I have attempted.

[kate2753]

@txshan, could you try running this in the console of your page:

document.getElementById("attach-icon")

This is what hopscotch does under the hood to find the target element. If element can't be found using document.getElementById, then Hopscotch would not be able to position the callout.

[txshan]

It's located in the console, but not Hopscotch. See screenshot:

[kate2753]

It seems like a timing issue. Your code to create HopscotchCallout must be executing before the element itself is rendered.

Try running this in console after page is loaded:

document.getElementById("attach-icon")

var calloutMgr = hopscotch.getCalloutManager();

calloutMgr.createCallout({ id: 'attach-icon',   target: 'attach-btn',   placement: 'bottom',  title: 'Now you can share images & files!',   content: 'Share a project you\'re proud of, a photo from a recent event, or an interesting presentation.' });

[txshan]

Tried it in a $(window).load(function({}); too and get the same error.

[kate2753]

Is there any way you can include unminified version of hopscotch on your page? I'd love to see the stack trace of the exception with line numbers.

You could also try applying the change from pull request #178 to your hopscotch.js file to see if error message you are seeing is changing

[txshan]

I used the unminified css and applied the changes from the pull request, and all is well.

[kate2753]

Glad to hear that #178 resolves it. Thank you for helping us catch this issue!