3rd party tooltips for flags container

[anton-kanashkin]

Version 17.0.12

Steps to reproduce

1. Select any country in the country list
2. Hover the mouse over the dropdown list's button to trigger the tooltip

Expected behaviour

It would be great to be able to configure the tooltip. For example, we use Bootstrap tooltips.

Actual behaviour

Browser tooltip is shown.

---

Right now I don't see a clear way of configuring the tooltips. If I initialize Bootstrap tooltip like so:

$(iti.selectedFlag).tooltip({
    title: () => iti.getSelectedCountryData().name
});

then next _setFlag() call will set the title attribute again:

key: "_setFlag",
value: function _setFlag(countryCode) {
  // ... omitted
  this.selectedFlag.setAttribute("title", title);
  // ... omitted
}

And this will display both Bootstrap and native tooltips:

So:

• Is there a way to configure tooltips?
• Or could I at least permanently hide the native tooltip?

[jackocnr]

Hmm fair enough. I would be open to a PR to add a new initialisation option autoTitle, which defaults to true, but if set to false will not set any 'title' attribute.

[jackocnr]

Actually thinking about this further, you will need to listen for the countrychange event in order to update your custom tooltip every time the country changes (e.g. user selects a new country from list, or types a new international dial code in the input). So you will already have something like this:

input.addEventListener('countrychange', () => {
    selectedFlag.initBootstrapTooltip(...);
});

Why not just add a line in there to remove the tooltip attribute each time e.g. selectedFlag.removeAttribute('title').

At this point, as there's an easy workaround, I'd prefer not to add yet another initialisation option just for this use case.