Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip only show for first element #1185

Closed
Rc85 opened this issue Aug 28, 2018 · 4 comments · Fixed by #1465 · May be fixed by largerock/largerock.com#5
Closed

Tooltip only show for first element #1185

Rc85 opened this issue Aug 28, 2018 · 4 comments · Fixed by #1465 · May be fixed by largerock/largerock.com#5

Comments

@Rc85
Copy link

Rc85 commented Aug 28, 2018

reactstrap version 6.4
react verison 16.4.2
bootstrap 4

In cases where there are elements with the same ID created through a loop or rendered from reusable components, the tooltip only show for the first element with the ID.

I try to fix it myself but I lack the knowledge of reading other people's code. The issue, I suspect lies here

function getTarget(target) {
  var els = findDOMElements(target);
  if (isArrayOrNodeList(els)) {
    return els[0];
  }
  return els;
}

It's always returning the first element of the list, even when there are more than one elements. In the original bootstrap 4, it initializes tooltip for any elements with the attribute data-toggle (from the example), thus allowing same tooltip to show on different same elements. Consider using a loop to loop through NodeList and apply the addEventListener.

@TheSharpieOne
Copy link
Member

bootstrap works different and perhaps we should look into working more similar to how bootstrap does for this.
bootstrap has the reference to the tooltip on the trigger, allowing multiple triggers trigger the same tooltip.
reactstrap has a reference to the trigger on the tooltip. This allows multiple tooltips to be triggered by the same trigger.

@suung
Copy link

suung commented Dec 19, 2018

HI there,

nobody interested in fixing this?
Is there a reasonable approach, that reaches the same goal?

Cheers

@kylanhurt
Copy link

Definitely need a fix for this

@akhlesh
Copy link
Contributor

akhlesh commented Apr 21, 2019

I have fixed this, demo with the fix - https://stackblitz.com/edit/react-k8rkzv

TheSharpieOne pushed a commit that referenced this issue Oct 15, 2019
* fix(Tooltip single target):Support for multiple target elements using css selector #1185

* fix(Tooltip single target):Removed onClosed handler as it was redundant #1185

* fix(Tooltip single target):isOpen state can control first element only #1185

* fix(Tooltip single target):Added unit tests #1185
watinha added a commit to watinha/reactstrap that referenced this issue Dec 20, 2020
kyletsang pushed a commit that referenced this issue Dec 20, 2020
…ed (#2038)

* fix(#1990): changes priority of target element passed to popper component

* fix(#1185): navigates through this._targets for placing popover event (fixes reintroduced bug)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment