Uncaught TypeError: Cannot read property 'documentElement' of null

Question

After i include the bootstrap.js

<script type="text/javascript" src="/js/bootstrap/js/bootstrap.js"></script>

I get followning error in the console: Uncaught TypeError: Cannot read property 'documentElement' of null

The boots collapse works just fine but the console get spammed this error. I have included jquery before bootstrap.

Anyone else had this problem before?

Edit:

  Tooltip.prototype.show = function () {
var e = $.Event('show.bs.' + this.type)

if (this.hasContent() && this.enabled) {
  this.$element.trigger(e)

  var inDom = $.contains(this.$element[0].ownerDocument.documentElement, this.$element[0])
  if (e.isDefaultPrevented() || !inDom) return
  var that = this

this is a snipet from the bootstrap.js script. It seems the error comes always in the tooltip function in the var inDom line at the documentElement part

Answer 1

You most likely have another tooltip library still in use (like JQueryUI/Tooltip) OR you're trying to attach a tooltip directly to the document element. Please look into your code for something like:

$(document).tooltip

or something like that, and remove it in order to make things work again. Be sure to review every other .tooltip() call you might already have, since they'll most likely not work anymore: you'll need to manually port them to Bootstrap in order to make them work again.

If you want to keep both Bootstrap/Tooltip and JQueryUI/Tooltip (assuming that's your scenario), you can use $.widget.bridge to manually change the JQueryUI tooltip plugin name:

// Change JQueryUI/tooltip plugin name to 'uitooltip' to fix name collision with Bootstrap/tooltip
$.widget.bridge('uitooltip', $.ui.tooltip);

You need to to this AFTER importing the JQueryUI js file and BEFORE importing the Bootstrap js file: while you're at it I also suggest you to do the same with button/uibutton to solve the exact same problem. The result code will look like that:

<script type="text/javascript" src="path/to/jqueryui.js" />
<script type="text/javascript">
// Change JQueryUI plugin names to fix name collision with Bootstrap:
$.widget.bridge('uitooltip', $.ui.tooltip);
$.widget.bridge('uibutton', $.ui.button);
</script>
<script type="text/javascript" src="path/to/bootstrap.js" />

Then you can just re-route your $(document).tooltip call to $(document).uitooltip to make everything work.

Alternatively, if you don't find the offending js code and/or you don't want to use $.widget.brige, you can always manually patch bootstrap.js to avoid this kind of error. This can be done by replacing the following line (#1384 in bs 3.3.1):

var inDom = $.contains(this.$element[0].ownerDocument.documentElement, this.$element[0])

with this line:

var inDom = $.contains((this.$element[0].ownerDocument || this.$element[0]).documentElement, this.$element[0])

Keep in mind, tho, that you'll still have a broken .tooltip() call in your code somewhere.

See also:

http://www.ryadel.com/2015/01/03/using-jquery-ui-bootstrap-togheter-web-page/ (an article I wrote on my blog to better explain the issue)

https://github.com/twbs/bootstrap/issues/14483

http://jqueryui.com/tooltip/