Bootstrap and jQuery UI on One Page: Cancelling (Destroy) Every Tooltip

Use the destroy option
I use both libraries and frameworks on couple of posts. They're, like, punching each other (collided, the libraries), and then boop! the post was gone (the HTML page went blank).
To calm those, which by the way, each has the exact same function name, called tooltip, we need to call the destroyer.

Bootstrap and jQuery UI also have that same "name" for the destroyer. It's called destroy.

To grab all elements with title attribute in each, use $( "[title]" ) selector.

---

Call it on $( window ).load() event
$( window ).load( function () { $( "[title]" ).tooltip( "destroy" ); });

If you initialized the tooltip on $( window ).load() event, then you'd need to put setTimeout to destroy it. Such as: $( window ).load( function () { setTimeout( function () { $( "[title]" ).tooltip( "destroy" ); }, [duration]); });

The [duration] needs to be changed to actual duration (in milliseconds). Like, 200, 500, etc.

---

We can also include the Bootstrap custom data attribute selector for tooltip

That can be: [data-toggle='tooltip'] or [data-original-title].
So, it'd be like: $( window ).load( function () { $( "[title]" ).tooltip( "destroy" ); // separate that $( "[data-toggle='tooltip']" ).tooltip( "destroy" ); // (or) // $( "[data-original-title]" ).tooltip( "destroy" ); });

---

If those didn't help
We can remove all [title] attribute from every DOM element.

With jQuery $( function () { $( "[title]" ).removeAttr( "title" ); });

Just JavaScript (function (d) { var titles = d.querySelectorAll( "[title]" ), titles_length = titles.length, i = 0; for ( i; i < titles_length; i++ ) { titles[i].removeAttribute( "title" ); } }(document));

Either coding will remove the [title] attribute from every element which has it. Therefore, there's nothing to run from either library. In another word, the tooltip widget will be cancelled.

---

The last

My suggestions:

• Avoid using (COMPLETE) multiple JavaScript libraries and CSS frameworks on one page. Especially if they have the same methods/functions/selectors names. Implement only one kind.
  If they have completely different purposes (and global names), then they'll be FINE to be implemented on a single page.
• The jQuery UI library (download) can be customized. There's an option to not include some widgets/functionality to avoid the conflicts.
  If you're using Google's CDN or other (free) CDNs, you don't want to mix them on one page. They'll punch each other, at some point.
• If you need to do that (using libraries with the same global names), use iframe for the other page.