bitbldr
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!
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Build Elixir applications with speed and confidence.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #ai
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #elixirconf-eu
- #api
- #forms
- #metaprogramming
- #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.
Practical resources that improve the lives of professional developers.
Master modern tools, write cleaner code, and tackle real-world challenges.
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!"
Showing Posts 1 to 4- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
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!!
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.andreaseriksson
Can confirm that Bootstrap native is a good option. Its time to loos that JQuery anyway
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