diff --git a/packages/dnb-eufemia/src/components/tooltip/TooltipPortal.js b/packages/dnb-eufemia/src/components/tooltip/TooltipPortal.js
index 3fe69bc3c69..23efd5cc55e 100644
--- a/packages/dnb-eufemia/src/components/tooltip/TooltipPortal.js
+++ b/packages/dnb-eufemia/src/components/tooltip/TooltipPortal.js
@@ -46,7 +46,7 @@ export default class TooltipPortal extends React.PureComponent {
tooltipPortal[group].count++
- this.setState({ isMounted: true, active }, () => {
+ this.setState({ isMounted: true, isActive: active }, () => {
if (!this.isMainGorup()) {
this.renderPortal()
}
@@ -64,16 +64,22 @@ export default class TooltipPortal extends React.PureComponent {
componentDidUpdate(prevProps) {
const { group, active, hide_delay } = this.props
+ if (this.props.children !== prevProps.children) {
+ this.renderPortal()
+ }
+
if (tooltipPortal[group] && active !== prevProps.active) {
+ clearTimeout(tooltipPortal[group].timeout)
+
if (active && !prevProps.active) {
- this.setState({ active: true }, () => {
+ this.setState({ isActive: true }, () => {
if (!this.isMainGorup()) {
this.renderPortal()
}
})
} else if (!active && prevProps.active) {
- this.timeout = tooltipPortal[group].timeout = setTimeout(() => {
- this.setState({ active: false }, () => {
+ tooltipPortal[group].timeout = setTimeout(() => {
+ this.setState({ isActive: false }, () => {
if (!this.isMainGorup()) {
this.renderPortal()
}
@@ -91,10 +97,9 @@ export default class TooltipPortal extends React.PureComponent {
componentWillUnmount() {
const { group } = this.props
- clearTimeout(this.timeout)
-
if (tooltipPortal[group]) {
tooltipPortal[group].count--
+ clearTimeout(tooltipPortal[group].timeout)
if (!this.isMainGorup()) {
ReactDOM.unmountComponentAtNode(tooltipPortal[group].node)
@@ -167,7 +172,7 @@ export default class TooltipPortal extends React.PureComponent {
,
tooltipPortal[group].node
)
@@ -176,7 +181,7 @@ export default class TooltipPortal extends React.PureComponent {
,
tooltipPortal[group].node
)
diff --git a/packages/dnb-eufemia/src/components/tooltip/__tests__/Tooltip.test.js b/packages/dnb-eufemia/src/components/tooltip/__tests__/Tooltip.test.js
index 1b5c6af92e8..0000a5e5955 100644
--- a/packages/dnb-eufemia/src/components/tooltip/__tests__/Tooltip.test.js
+++ b/packages/dnb-eufemia/src/components/tooltip/__tests__/Tooltip.test.js
@@ -93,6 +93,55 @@ describe('Tooltip', () => {
const Comp = mount()
expect(await axeComponent(Comp)).toHaveNoViolations()
})
+
+ it('should show when active prop is true', async () => {
+ const Component = () => {
+ const [active, setActive] = React.useState(false)
+
+ return (
+ {
+ setActive(true)
+ }}
+ onMouseLeave={() => {
+ setActive(false)
+ }}
+ >
+ Text
+
+ }
+ >
+ Tooltip
+
+ )
+ }
+
+ const Comp = mount()
+
+ const mainElem = document.body.querySelector('.dnb-tooltip')
+
+ Comp.find('button').simulate('mouseenter')
+
+ expect(mainElem.classList.contains('dnb-tooltip--active')).toBe(true)
+
+ Comp.find('button').simulate('mouseleave')
+ Comp.find('button').simulate('mouseenter')
+
+ await wait(2)
+
+ expect(mainElem.classList.contains('dnb-tooltip--active')).toBe(true)
+
+ Comp.find('button').simulate('mouseleave')
+
+ await wait(2)
+
+ expect(mainElem.classList.contains('dnb-tooltip--hide')).toBe(true)
+ })
})
describe('Anchor with tooltip', () => {