关于Bootstrap 4 Tooltip插件jQuery注册代码的两处疑问

Great questions about the inner workings of Bootstrap 4's tooltip plugin—let’s break these down clearly:

1. Why add the Constructor property to Tooltip._jQueryInterface? #

First, let’s recap how Bootstrap’s jQuery plugins work: the Tooltip class holds all the core logic (initialization, showing/hiding, event handling, etc.), while Tooltip._jQueryInterface is the wrapper method attached to $.fn.tooltip so you can call things like $(element).tooltip('show') in your code.

Setting $.fn[NAME].Constructor = Tooltip serves two key, practical purposes:

• Direct access to the underlying class: The Tooltip class is wrapped in a closure (to avoid cluttering the global scope), so you can’t reference it directly by default. By attaching it as the Constructor property of the jQuery plugin method, developers can manually create Tooltip instances without relying on the jQuery chain. For example:

  // Manually create a tooltip instance instead of using $(element).tooltip()
  const myTooltip = new $.fn.tooltip.Constructor('#my-button', {
    placement: 'right',
    trigger: 'hover'
  });
  myTooltip.show();
  

• Easy extension and customization: If you want to tweak the plugin’s default behavior or build a custom tooltip on top of Bootstrap’s, you can access the class’s defaults or inherit from it. For instance, modifying global defaults for all tooltips:

  // Change the default delay for all tooltip instances
  $.fn.tooltip.Constructor.Defaults.delay = { show: 500, hide: 100 };
  

This pattern keeps the core class encapsulated while still giving developers flexibility to work with it directly when needed.

2. What does the noConflict method do, and how to use it? #

The noConflict method exists to solve naming collisions. Let’s say you have another library (like an older version of Bootstrap, or a different UI toolkit) that also defines a $.fn.tooltip method. When you load Bootstrap 4’s tooltip plugin, it will overwrite that existing tooltip method—this is where noConflict comes in to save the day.

How it works under the hood: #

When Bootstrap initializes the plugin, it first saves the original value of $.fn[NAME] (in this case, $.fn.tooltip) to a temporary variable (like oldTooltip). The noConflict method then restores $.fn.tooltip to that original value, and returns Bootstrap’s tooltip interface so you can assign it to a custom variable of your choice.

Example usage: #

// 1. Load the conflicting library first (e.g., an old tooltip plugin)
// 2. Load Bootstrap 4's tooltip plugin (this overwrites $.fn.tooltip)

// 3. Call noConflict to restore the original tooltip method
const BootstrapTooltip = $.fn.tooltip.noConflict();

// Now:
// - $.fn.tooltip is back to the original library's method
// - Bootstrap's tooltip is accessible via BootstrapTooltip
BootstrapTooltip('#my-element').tooltip('show');

// Use the original library's tooltip as before
$('.old-tooltip').tooltip();

This way, both libraries can coexist without interfering with each other.

内容的提问来源于stack exchange，提问作者Roman Pokrovskij