Restore `offset` option for tooltip/popover components

2 files changed, 57 insertions, 0 deletions

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 909cb0f8a..6d85fde26 100644
--- 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,
@@ -485,6 +501,12 @@ class Tooltip extends BaseComponent {
           }
         },
         {
+          name: 'offset',
+          options: {
+            offset: this._getOffset()
+          }
+        },
+        {
           name: 'preventOverflow',
           options: {
             rootBoundary: this.config.boundary
diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js
index 213dcc91f..38af0235b 100644
--- 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">'