Using data-toggle-outside with a trigger containing another tag

[lukaszwnek]

Hello! First of all, thank you for this amazing library, great job!

I'm trying to implement a tooltip that would open after clicking a button with an img tag inside of it:

HTML

<button data-toggle-class-on-target="hidden" data-toggle-target=".tooltip" data-toggle-event="click" data-toggle-outside>
  <img src="https://secure.gravatar.com/avatar/37640f3902ef08c7fad7d306c912ebf0?d=identicon&s=200">
</button>
<span class="tooltip hidden">Awesome tooltip</span>

CSS

.hidden {
  display: none !important;
}

.tooltip {
  background-color: #00b074;
  color: white;
}

button {
  cursor: pointer;
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  outline: none;
}

img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

https://codepen.io/lukaszwnek/pen/pobVZQo

However, clicking the button doesn't seem to show the tooltip. It starts working when I either:

1. remove the data-toggle-outside attribute from the button (which I don't want to do since I need that to close it).
2. moving all the data-toggle attributes to the img (but this goes against your own recommendation to use buttons as triggers).

The issue isn't limited to the img tag, from what I've seen it persists with any tag inside of the button (only plain text works).

It feels like a bug, but maybe there's something wrong with my setup? I'd really appreciate your opinion @Twikito.

Thanks!

[Twikito]

Hi @lukaszwnek 👋

Ok, let me investigate.

Edit: Ok, I got it.

[Twikito]

Hey @lukaszwnek 👋

It should now be fixed. Can you confirm, please?

[lukaszwnek]

@Twikito Yes, the new version fixed the issue! Thank you so much for such a quick response and for implementing the fix in no time! Really impressive stuff, keep up the good work!

Cheers! 🍻