Issues with Alpine.js Tooltips and gettext Translation on Show Pages

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 :))

It’s been a while since I used Alpine, but can’t you put an assign into the x-data attribute?

<div class="ms-2" x-data="{ tooltip: '<%= @tooltip %>' }">
  <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>

Or is it x-data={“{ tooltip: ' #{@tooltip}' "}?

Oh **** :upside_down_face: I posted the wrong code snippet earlier. Here’s exactly how my code looks:

  <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>

In this case, how can I use gettext to translate the tooltip?