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>
  1. Phoenix hook using phx-hook=“TooltipInit”
export const TooltipInit = {
  mounted() {
    const id = this.el.getAttribute('id');
    $('#' + id).tooltip();
  },
};

  1. Adding script tag with initialization directly in the LiveView render
  2. 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!

1 Like

Perhaps this blog post on ‘Bootstrap Native’ would be useful…

https://dashbit.co/blog/using-bootstrap-native-with-live-view

I’m curious to learn what you find please report back on your progress!!

1 Like

Have you tried adding phx-update="ignore" to your button? Liveview manipulates the DOM so clashes with any other JS trying to manipulate the DOM. phx-update="ignore" tells LiveView not to mess with that element and its children.

Can confirm that Bootstrap native is a good option. Its time to loos that JQuery anyway :smile:

Thanks everyone! Adding phx-update="ignore" to the button’s parent div worked like a charm.

I quickly tried using BSN as well, but I couldn’t get it working and quickly gave up given the other solution. Maybe sometime in the future we can switch over or just upgrade to BS 5 with no jquery dependency :grinning: