rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

Fix tooltip when hovering a children element (delegateTarget) (#30928)

Browse Source 
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Tanguy Krotoff 2020-06-18 09:02:44 +02:00 committed by GitHub
parent ffbdb08474
commit d80a9fc553
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 44 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/src/dom/event-handler.js
View File

@ -94,6 +94,7 @@ function getEvent(element) {
function bootstrapHandler(element, fn) {
return function handler(event) {
event.delegateTarget = element
if (handler.oneOff) {
EventHandler.off(element, event.type, fn)
}
@ -109,6 +110,7 @@ function bootstrapDelegationHandler(element, selector, fn) {
for (let { target } = event; target && target !== this; target = target.parentNode) {
for (let i = domElements.length; i--;) {
if (domElements[i] === target) {
event.delegateTarget = target
if (handler.oneOff) {
EventHandler.off(element, event.type, fn)
}

18
js/src/tooltip.js
View File

@ -194,14 +194,14 @@ class Tooltip {
if (event) {
const dataKey = this.constructor.DATA_KEY
let context = Data.getData(event.target, dataKey)
let context = Data.getData(event.delegateTarget, dataKey)
if (!context) {
context = new this.constructor(
event.target,
event.delegateTarget,
this._getDelegateConfig()
)
Data.setData(event.target, dataKey, context)
Data.setData(event.delegateTarget, dataKey, context)
}
context._activeTrigger.click = !context._activeTrigger.click
@ -587,14 +587,14 @@ class Tooltip {
_enter(event, context) {
const dataKey = this.constructor.DATA_KEY
context = context || Data.getData(event.target, dataKey)
context = context || Data.getData(event.delegateTarget, dataKey)
if (!context) {
context = new this.constructor(
event.target,
event.delegateTarget,
this._getDelegateConfig()
)
Data.setData(event.target, dataKey, context)
Data.setData(event.delegateTarget, dataKey, context)
}
if (event) {
@ -627,14 +627,14 @@ class Tooltip {
_leave(event, context) {
const dataKey = this.constructor.DATA_KEY
context = context || Data.getData(event.target, dataKey)
context = context || Data.getData(event.delegateTarget, dataKey)
if (!context) {
context = new this.constructor(
event.target,
event.delegateTarget,
this._getDelegateConfig()
)
Data.setData(event.target, dataKey, context)
Data.setData(event.delegateTarget, dataKey, context)
}
if (event) {

22
js/tests/unit/tooltip.spec.js
View File

@ -324,6 +324,28 @@ describe('Tooltip', () => {
tooltip.show()
})
it('should show a tooltip when hovering a children element', done => {
fixtureEl.innerHTML =
'<a href="#" rel="tooltip" title="Another tooltip">' +
'<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">' +
'<rect width="100%" fill="#563d7c"/>' +
'<circle cx="50" cy="50" r="30" fill="#fff"/>' +
'</svg>' +
'</a>'
const tooltipEl = fixtureEl.querySelector('a')
const tooltip = new Tooltip(tooltipEl)
spyOn(tooltip, 'show')
tooltipEl.querySelector('rect').dispatchEvent(createEvent('mouseover', { bubbles: true }))
setTimeout(() => {
expect(tooltip.show).toHaveBeenCalled()
done()
}, 0)
})
it('should show a tooltip on mobile', done => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'

11
site/content/docs/5.0/components/tooltips.md
View File

@ -81,6 +81,17 @@ And with custom HTML added:
</button>
{{< /highlight >}}
With an SVG:
<div class="bd-example tooltip-demo">
<a href="#" data-toggle="tooltip" title="Default tooltip">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
<rect width="100%" height="100%" fill="#563d7c"/>
<circle cx="50" cy="50" r="30" fill="#007bff"/>
</svg>
</a>
</div>
## Usage
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.