Plugin Options via .data()

Plugin Options Pattern

jQuery plugins often read their configuration from data-* attributes, allowing per-element customization without extra JavaScript.

Example

// Plugin reads options from element data
$.fn.tooltip = function(defaults) {
  return this.each(function() {
    const opts = $.extend({}, defaults, $(this).data());
    // opts.placement, opts.delay, opts.trigger from data attrs
    initTooltip(this, opts);
  });
};

// Usage in HTML — no extra JS needed
// <button data-placement="top" data-delay="500">Hover me</button>
$("[data-placement]").tooltip({ trigger: "hover" });

JAVASCRIPT

Full Editor

Pro Tip

$.extend({}, defaults, $(this).data()) merges defaults with per-element overrides.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned