diff --git a/app/components/admin_tooltip_component.rb b/app/components/admin_tooltip_component.rb
new file mode 100644
index 0000000000..f790fffd1d
--- /dev/null
+++ b/app/components/admin_tooltip_component.rb
@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class AdminTooltipComponent < ViewComponent::Base
+  def initialize(text:, link_text:, placement: "top", link: "", link_class: "")
+    @text = text
+    @link_text = link_text
+    @placement = placement
+    @link = link
+    @link_class = link_class
+  end
+end
diff --git a/app/components/admin_tooltip_component/admin_tooltip_component.html.haml b/app/components/admin_tooltip_component/admin_tooltip_component.html.haml
new file mode 100644
index 0000000000..d4e7685940
--- /dev/null
+++ b/app/components/admin_tooltip_component/admin_tooltip_component.html.haml
@@ -0,0 +1,8 @@
+%div{"data-controller": "tooltip", "data-tooltip-placement-value": @placement }
+  %a{"data-tooltip-target": "element", href: @link, class: @link_class}
+    = @link_text 
+  .tooltip-container
+    .tooltip{"data-tooltip-target": "tooltip"}
+      = sanitize @text
+      .arrow{"data-tooltip-target": "arrow"}
+
diff --git a/app/views/admin/products_v3/product_preview.turbo_stream.haml b/app/views/admin/products_v3/product_preview.turbo_stream.haml
index ca4e62b535..ded87d134f 100644
--- a/app/views/admin/products_v3/product_preview.turbo_stream.haml
+++ b/app/views/admin/products_v3/product_preview.turbo_stream.haml
@@ -43,7 +43,7 @@
                     - @product.properties_including_inherited.each do |property|
                       %li
                         - if property[:value].present?
-                          = render partial: "admin/shared/tooltip", locals: { tooltip_text: property[:value], link_text: property[:name], placement: "bottom" }
+                          = render AdminTooltipComponent.new(text: property[:value], link_text: property[:name], placement: "bottom")
                         - else
                           %a
                             %span
@@ -60,7 +60,7 @@
                 .small-4.medium-3.columns.variant-price
                   = number_to_currency(variant.price)
                   .unit-price.variant-unit-price
-                    = render partial: "admin/shared/tooltip", locals: { tooltip_text: t("js.shopfront.unit_price_tooltip"), link_text: "", link: "", link_class: "question-mark-icon", placement: "top" }
+                    = render AdminTooltipComponent.new(text: t("js.shopfront.unit_price_tooltip"), link_text: "", placement: "top", link_class: "question-mark-icon")
                     - # TODO use an helper
                     - unit_price = UnitPrice.new(variant)
                     - price_per_unit = variant.price / (unit_price.denominator || 1)
@@ -98,7 +98,7 @@
                   - @product.properties_including_inherited.each do |property|
                     %li
                       - if property[:value].present?
-                        = render partial: "admin/shared/tooltip", locals: { tooltip_text: property[:value], link_text: property[:name], placement: "bottom" }
+                        = render AdminTooltipComponent.new(text: property[:value], link_text: property[:name], placement: "bottom")
                       - else
                         %a
                           %span
diff --git a/app/views/admin/shared/_tooltip.html.haml b/app/views/admin/shared/_tooltip.html.haml
deleted file mode 100644
index ca6f98310b..0000000000
--- a/app/views/admin/shared/_tooltip.html.haml
+++ /dev/null
@@ -1,10 +0,0 @@
-- tooltip_placement = defined?(placement) ? placement : "top"
-- tooltip_link = defined?(link) ? link : ""
-- tooltip_link_class = defined?(link_class) ? link_class : ""
-%div{"data-controller": "tooltip", "data-tooltip-placement-value": tooltip_placement }
-  %a{"data-tooltip-target": "element", href: tooltip_link, class: tooltip_link_class}
-    = link_text 
-  .tooltip-container
-    .tooltip{"data-tooltip-target": "tooltip"}
-      = sanitize tooltip_text
-      .arrow{"data-tooltip-target": "arrow"}
diff --git a/app/views/admin/shared/_whats_this_tooltip.html.haml b/app/views/admin/shared/_whats_this_tooltip.html.haml
index d63fa41768..73d4a21d51 100644
--- a/app/views/admin/shared/_whats_this_tooltip.html.haml
+++ b/app/views/admin/shared/_whats_this_tooltip.html.haml
@@ -1 +1 @@
-= render partial: 'admin/shared/tooltip', locals: {link_class: "" ,link: nil, link_text: t('admin.whats_this'),  tooltip_text: tooltip_text}
+= render AdminTooltipComponent.new(text: tooltip_text, link_text: t('admin.whats_this'), link: nil)
diff --git a/app/views/spree/admin/orders/_table_row.html.haml b/app/views/spree/admin/orders/_table_row.html.haml
index cb0b579391..7cc4aae10f 100644
--- a/app/views/spree/admin/orders/_table_row.html.haml
+++ b/app/views/spree/admin/orders/_table_row.html.haml
@@ -45,7 +45,7 @@
     %div.row-loading-icons
       - if local_assigns[:success]
         %i.success.icon-ok-sign{"data-controller": "ephemeral"}
-    = render partial: 'admin/shared/tooltip', locals: {link_class: "icon_link with-tip icon-edit no-text" ,link: edit_admin_order_path(order), link_text: "",  tooltip_text: t('spree.admin.orders.index.edit')}
+    = render AdminTooltipComponent.new(text: t('spree.admin.orders.index.edit'), link_text: "", link: edit_admin_order_path(order), link_class: "icon_link with-tip icon-edit no-text")
     - if order.ready_to_ship?
       %form
         = render ShipOrderComponent.new(order: order)
diff --git a/spec/components/admin_tooltip_component_spec.rb b/spec/components/admin_tooltip_component_spec.rb
new file mode 100644
index 0000000000..4e0039dcea
--- /dev/null
+++ b/spec/components/admin_tooltip_component_spec.rb
@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe AdminTooltipComponent, type: :component do
+  it "displays the tooltip link" do
+    render_inline(described_class.new(text: "Tooltip description", link_text: "Hover here"))
+
+    expect(page).to have_selector "a", text: "Hover here"
+  end
+
+  describe "text" do
+    it "displays the tooltip text" do
+      render_inline(described_class.new(text: "Tooltip description", link_text: "Hover here"))
+
+      expect(page).to have_selector ".tooltip", text: "Tooltip description"
+    end
+
+    it "sanitizes the tooltip text" do
+      render_inline(described_class.new( text: "Tooltip <span>description</span>",
+                                         link_text: "Hover here"))
+
+      expect(page).to have_selector ".tooltip", text: "Tooltip description"
+    end
+  end
+
+  describe "placement" do
+    it "uses top as default" do
+      render_inline(described_class.new(text: "Tooltip <span>description</span>",
+                                        link_text: "Hover here"))
+
+      expect(page).to have_selector '[data-tooltip-placement-value="top"]'
+    end
+
+    it "uses the given placement" do
+      render_inline(described_class.new(text: "Tooltip <span>description</span>",
+                                        link_text: "Hover here", placement: "left"))
+      expect(page).to have_selector '[data-tooltip-placement-value="left"]'
+    end
+  end
+
+  it "adds the correct link" do
+    render_inline(described_class.new(text: "Tooltip description", link_text: "Hover here",
+                                      link: "www.ofn.com"))
+
+    expect(page).to have_selector '[href="www.ofn.com"]'
+  end
+
+  it "adds the correct link_class" do
+    render_inline(described_class.new(text: "Tooltip description", link_text: "Hover here",
+                                      link_class: "pretty"))
+    expect(page).to have_selector 'a[class="pretty"]'
+  end
+end