Phoenix LiveView and Bootstrap tooltips

Hello!

I’m having trouble using Bootstrap tooltips inside a Phoenix LiveView. I have verified that the tooltips work just fine on the same page outside of the LiveView in the eex template, but when placed inside of a LiveView render function they do not seem to work. I’m wondering if this is something related to browser events not making their way to the underlying Popper.js listeners due to Phoenix or if it is simply not possible to do something like this inside of LiveView, which would be a shame because LiveView has been wonderful in so many other ways.

Here is an abbreviated snippet of my code:

  def render(assigns) do
    ~L"""
        ...


        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
          Tooltip on top
        </button>

      ...
      """

What I have tried so far without success…

1. Standard tooltip initialization from the eex template

  <body>
    ...

    <script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip();
    });
    </script>
  </body>

2. Phoenix hook using phx-hook=“TooltipInit”

export const TooltipInit = {
  mounted() {
    const id = this.el.getAttribute('id');
    $('#' + id).tooltip();
  },
};

3. Adding script tag with initialization directly in the LiveView render
4. Calling initialization directly in browser console

> $('[data-toggle="tooltip"]').tooltip();
w.fn.init [button.btn.btn-secondary]

The codebase heavily leverages bootstrap for styling and themes, so we aren’t really in a position to switch away from bootstrap as our main framework. Any help or advice would be greatly appreciated.

Thanks!