bitbldr
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…
- Standard tooltip initialization from the eex template
<body>
...
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
- Phoenix hook using phx-hook=“TooltipInit”
export const TooltipInit = {
mounted() {
const id = this.el.getAttribute('id');
$('#' + id).tooltip();
},
};
- Adding script tag with initialization directly in the LiveView render
- 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!
Marked As Solved
mindok
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.
Also Liked
AndyL
Perhaps this blog post on ‘Bootstrap Native’ would be useful…
I’m curious to learn what you find please report back on your progress!!
Last Post!
bitbldr
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 
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Enabling companies to succeed by building software people love.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"