Hello,
I’m currently facing an issue when using tooltips from Alpine.js in my Elixir Phoenix LiveView project. The tooltips are working perfectly fine on index pages but not on show pages. To work around this, I added an x-data
attribute to handle tooltips like this:
<div class="ms-2" x-data="{ tooltip: 'Edit Dashboard' }">
<button
class="ti-btn ti-btn-light !py-3 ms-2"
type="button"
phx-click="toggleDetails"
phx-target="#dashboard_show"
phx-value-asset_id={@dashboard.id}
x-tooltip="tooltip"
>
<i class="fe fe-edit-3 text-xs"></i>
</button>
</div>
This works great for static text, but I need to translate the tooltip using gettext
.
Does anyone know the best way to integrate gettext
with Alpine.js tooltips or if there’s a better solution to make tooltips work on show pages?
Any help would be greatly appreciated :))