Musievska
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 :))
First Post!
cmo
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}' "}?
Popular in Questions
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New
Hello all!
I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
Using vs code and installed ElixirLS: support and debugger.
And I got an error popped up on start up says
Failed to run ‘elixir’ comma...
New
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors:
[WARN] - (starship::utils): Executing command ...
New
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
I tried installing
elixir 1.11.2
erlang 23.3.4
via asdf in my zsh shell. Enabled the versions locally and globally.
When I list them ...
New
Credo is smart enough to check for (something like) this:
assert length(the_list) == 0
with this response:
Checking if an enum is empt...
New
Hi everyone!
I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
Other popular topics
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New
Hello everyone,
I try to use an Javascript Event Handler in my root.html.leex file.
Therefore I created a function in the app.js file: ...
New
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set?
Thanks.
New
Hi!
In PHP: $_SERVER[‘SERVER_ADDR’] - in Elixir?
Searched the docs for ip address and the web, no good results.
Thanks!
New
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
Hello everyone,
Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
New
Hi,
I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
New
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
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance










