Restore `offset` option for tooltip/popover components

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 909cb0f8a7d53b2bdcd9397b322d8da7a8011514..6d85fde269428c859b295d01b091f6b91f01488d 100644 (file)
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -50,6 +50,7 @@ const DefaultType = {
   html: 'boolean',
   selector: '(string|boolean)',
   placement: '(string|function)',
+  offset: '(array|string|function)',
   container: '(string|element|boolean)',
   fallbackPlacements: 'array',
   boundary: '(string|element)',
@@ -80,6 +81,7 @@ const Default = {
   html: false,
   selector: false,
   placement: 'top',
+  offset: [0, 0],
   container: false,
   fallbackPlacements: ['top', 'right', 'bottom', 'left'],
   boundary: 'clippingParents',
@@ -473,6 +475,20 @@ class Tooltip extends BaseComponent {
     return context
   }
 
+  _getOffset() {
+    const { offset } = this.config
+
+    if (typeof offset === 'string') {
+      return offset.split(',').map(val => Number.parseInt(val, 10))
+    }
+
+    if (typeof offset === 'function') {
+      return popperData => offset(popperData, this._element)
+    }
+
+    return offset
+  }
+
   _getPopperConfig(attachment) {
     const defaultBsConfig = {
       placement: attachment,
@@ -484,6 +500,12 @@ class Tooltip extends BaseComponent {
             fallbackPlacements: this.config.fallbackPlacements
           }
         },
+        {
+          name: 'offset',
+          options: {
+            offset: this._getOffset()
+          }
+        },
         {
           name: 'preventOverflow',
           options: {

diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js
index 213dcc91f6ade82a5326751a713149c5a9cbf454..38af0235ba2988c7f0831839bb483d808baa4a42 100644 (file)
--- a/js/tests/unit/tooltip.spec.js
+++ b/js/tests/unit/tooltip.spec.js
@@ -107,6 +107,41 @@ describe('Tooltip', () => {
       tooltipInContainerEl.click()
     })
 
+    it('should create offset modifier when offset is passed as a function', done => {
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Offset from function">'
+
+      const getOffset = jasmine.createSpy('getOffset').and.returnValue([10, 20])
+      const tooltipEl = fixtureEl.querySelector('a')
+      const tooltip = new Tooltip(tooltipEl, {
+        offset: getOffset,
+        popperConfig: {
+          onFirstUpdate: state => {
+            expect(getOffset).toHaveBeenCalledWith({
+              popper: state.rects.popper,
+              reference: state.rects.reference,
+              placement: state.placement
+            }, tooltipEl)
+            done()
+          }
+        }
+      })
+
+      const offset = tooltip._getOffset()
+
+      expect(typeof offset).toEqual('function')
+
+      tooltip.show()
+    })
+
+    it('should create offset modifier when offset option is passed in data attribute', () => {
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-bs-offset="10,20" title="Another tooltip">'
+
+      const tooltipEl = fixtureEl.querySelector('a')
+      const tooltip = new Tooltip(tooltipEl)
+
+      expect(tooltip._getOffset()).toEqual([10, 20])
+    })
+
     it('should allow to pass config to Popper with `popperConfig`', () => {
       fixtureEl.innerHTML = '<a href="#" rel="tooltip">'