mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-03 04:25:21 +02:00
Add stimulus tooltip controller (#1065)
* Add Tooltip Stimulus controller * Add test for tooltip * Remove comma * Normalize translations * Use floating-ui instead popper * Use component classes * Increase cross axis value * Cleanup * Update app/views/accounts/show.html.erb Use correct tailwind class Co-authored-by: Zach Gollwitzer <zach.gollwitzer@gmail.com> Signed-off-by: Tony Vincent <tonyvince7@gmail.com> * Use default values for options * Remove tooltip global variable * Add arrow target * Remove unused method --------- Signed-off-by: Tony Vincent <tonyvince7@gmail.com> Co-authored-by: Zach Gollwitzer <zach.gollwitzer@gmail.com>
This commit is contained in:
parent
6e74414cb2
commit
f315370512
11 changed files with 164 additions and 4 deletions
26
app/views/accounts/_tooltip.html.erb
Normal file
26
app/views/accounts/_tooltip.html.erb
Normal file
|
@ -0,0 +1,26 @@
|
|||
<%# locals: (account:) -%>
|
||||
<div data-controller="tooltip" data-tooltip-target="element" data-tooltip-placement-value="right" data-tooltip-offset-value=10 data-tooltip-cross-axis-value=50>
|
||||
<%= lucide_icon("info", class: "w-4 h-4 shrink-0 text-gray-500") %>
|
||||
<div id="tooltip" role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-700 text-sm p-2 rounded w-64">
|
||||
<div class="text-white">
|
||||
<%= t(".total_value_tooltip") %>
|
||||
</div>
|
||||
<div class="flex pt-3">
|
||||
<div class="text-gray-300">
|
||||
<%= t(".holdings") %>
|
||||
</div>
|
||||
<div class="text-white ml-auto">
|
||||
<%= tag.p format_money(account.investment.holdings_value, precision: 0) %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="text-gray-300">
|
||||
<%= t(".cash") %>
|
||||
</div>
|
||||
<div class="text-white ml-auto">
|
||||
<%= tag.p format_money(account.balance_money, precision: 0) %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-tooltip-target="arrow"></div>
|
||||
</div>
|
|
@ -52,7 +52,12 @@
|
|||
<div class="bg-white shadow-xs rounded-xl border border-alpha-black-25 rounded-lg">
|
||||
<div class="p-4 flex justify-between">
|
||||
<div class="space-y-2">
|
||||
<%= tag.p t(".total_value"), class: "text-sm font-medium text-gray-500" %>
|
||||
<div class="flex items-center gap-1">
|
||||
<div>
|
||||
<%= tag.p t(".total_value"), class: "text-sm font-medium text-gray-500" %>
|
||||
</div>
|
||||
<%= render "tooltip", account: @account if @account.investment? %>
|
||||
</div>
|
||||
<%= tag.p format_money(@account.value, precision: 0), class: "text-gray-900 text-3xl font-medium" %>
|
||||
<div>
|
||||
<% if @series.trend.direction.flat? %>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue