diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 909cb0f8a7..6d85fde269 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,
@@ -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 213dcc91f6..38af0235ba 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 = ''
+
+ 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 = ''
+
+ 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 = ''