From fc7e71072d9b4f36dd64e63123ce32ef7735bf07 Mon Sep 17 00:00:00 2001
From: Dan Popescu <pdan.popescu@gmail.com>
Date: Wed, 31 Dec 2025 04:01:08 +0200
Subject: [PATCH 1/2] feat(tooltip): add alignment utility classes (start,
 center, end)

- apply to all positions (top, bottom, left, right)
- add a new variable --tt-tail-off to set offset of the tail for start and end alignment

example:  https://play.tailwindcss.com/Qt8vZTMlSe?file=css

close #4229
---
 packages/daisyui/src/components/tooltip.css   | 66 ++++++++++++++-----
 .../(routes)/components/tooltip/+page.md      | 51 ++++++++++++--
 .../routes/(routes)/docs/utilities/+page.md   |  3 +-
 3 files changed, 99 insertions(+), 21 deletions(-)

diff --git a/packages/daisyui/src/components/tooltip.css b/packages/daisyui/src/components/tooltip.css
index 770c783e6db..a212e753733 100644
--- a/packages/daisyui/src/components/tooltip.css
+++ b/packages/daisyui/src/components/tooltip.css
@@ -4,6 +4,7 @@
     --tt-bg: var(--color-neutral);
     --tt-off: calc(100% + 0.5rem);
     --tt-tail: calc(100% + 1px + 0.25rem);
+    --tt-tail-off: 0.5rem;
 
     & > .tooltip-content,
     &[data-tip]:before {
@@ -69,13 +70,15 @@
   @layer daisyui.l1.l2 {
     > .tooltip-content,
     &[data-tip]:before {
-      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
-      inset: auto auto var(--tt-off) 50%;
+      transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, 0.25rem));
+      inset-inline: var(--tt-inset, 50% auto);
+      inset-block: auto var(--tt-off);
     }
 
     &:after {
-      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
-      inset: auto auto var(--tt-tail) 50%;
+      transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, 0.25rem));
+      inset-inline: var(--tt-tail-inset, 50% auto);
+      inset-block: auto var(--tt-tail);
     }
   }
 }
@@ -84,13 +87,16 @@
   @layer daisyui.l1.l2 {
     > .tooltip-content,
     &[data-tip]:before {
-      transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem));
-      inset: var(--tt-off) auto auto 50%;
+      transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, -0.25rem));
+      inset-inline: var(--tt-inset, 50% auto);
+      inset-block: var(--tt-off) auto;
     }
 
     &:after {
-      transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem)) rotate(180deg);
-      inset: var(--tt-tail) auto auto 50%;
+      transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, -0.25rem))
+        rotate(180deg);
+      inset-inline: var(--tt-tail-inset, 50% auto);
+      inset-block: var(--tt-tail) auto;
     }
   }
 }
@@ -99,13 +105,15 @@
   @layer daisyui.l1.l2 {
     > .tooltip-content,
     &[data-tip]:before {
-      transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem)) translateY(-50%);
-      inset: 50% var(--tt-off) auto auto;
+      transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem)) translateY(var(--tt-trans, -50%));
+      inset-inline: auto var(--tt-off);
+      inset-block: var(--tt-inset, 50% auto);
     }
 
     &:after {
-      transform: translateX(var(--tt-pos, 0.25rem)) translateY(-50%) rotate(-90deg);
-      inset: 50% calc(var(--tt-tail) + 1px) auto auto;
+      transform: translateX(var(--tt-pos, 0.25rem)) translateY(var(--tt-trans, -50%)) rotate(-90deg);
+      inset-inline: auto calc(var(--tt-tail) + 1px);
+      inset-block: var(--tt-tail-inset, 50% auto);
     }
   }
 }
@@ -114,17 +122,43 @@
   @layer daisyui.l1.l2 {
     > .tooltip-content,
     &[data-tip]:before {
-      transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem)) translateY(-50%);
-      inset: 50% auto auto var(--tt-off);
+      transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem)) translateY(var(--tt-trans, -50%));
+      inset-inline: var(--tt-off) auto;
+      inset-block: var(--tt-inset, 50% auto);
     }
 
     &:after {
-      transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%) rotate(90deg);
-      inset: 50% auto auto calc(var(--tt-tail) + 1px);
+      transform: translateX(var(--tt-pos, -0.25rem)) translateY(var(--tt-trans, -50%)) rotate(90deg);
+      inset-inline: calc(var(--tt-tail) + 1px) auto;
+      inset-block: var(--tt-tail-inset, 50% auto);
     }
   }
 }
 
+.tooltip-start {
+  @layer daisyui.l1.l2 {
+    --tt-trans: 0;
+    --tt-inset: 0 auto;
+    --tt-tail-inset: var(--tt-tail-off) auto;
+  }
+}
+
+.tooltip-center {
+  @layer daisyui.l1.l2 {
+    --tt-trans: -50%;
+    --tt-inset: 50% auto;
+    --tt-tail-inset: 50% auto;
+  }
+}
+
+.tooltip-end {
+  @layer daisyui.l1.l2 {
+    --tt-trans: 0;
+    --tt-inset: auto 0;
+    --tt-tail-inset: auto var(--tt-tail-off);
+  }
+}
+
 .tooltip-primary {
   @layer daisyui.l1.l2 {
     --tt-bg: var(--color-primary);
diff --git a/packages/docs/src/routes/(routes)/components/tooltip/+page.md b/packages/docs/src/routes/(routes)/components/tooltip/+page.md
index 2aab2340ffd..605e0723bbd 100644
--- a/packages/docs/src/routes/(routes)/components/tooltip/+page.md
+++ b/packages/docs/src/routes/(routes)/components/tooltip/+page.md
@@ -20,6 +20,12 @@ classnames:
     desc: Put tooltip on left
   - class: tooltip-right
     desc: Put tooltip on right
+  - class: tooltip-start
+    desc: Align tooltip on start
+  - class: tooltip-center
+    desc: Align tooltip on center
+  - class: tooltip-end
+    desc: Align tooltip on end
   modifier:
   - class: tooltip-open
     desc: Force open tooltip
@@ -95,10 +101,16 @@ classnames:
 
 
 ### ~Top
-<div class="my-6">
+<div class="my-6 flex flex-wrap gap-6">
+  <div class="tooltip tooltip-open tooltip-top tooltip-start" data-tip="hello">
+    <button class="btn">Top</button>
+  </div>
   <div class="tooltip tooltip-open tooltip-top" data-tip="hello">
     <button class="btn">Top</button>
   </div>
+  <div class="tooltip tooltip-open tooltip-top tooltip-end" data-tip="hello">
+    <button class="btn">Top</button>
+  </div>
 </div>
 
 ```html
@@ -109,10 +121,16 @@ classnames:
 
 
 ### ~Bottom
-<div class="my-6">
+<div class="my-6 flex flex-wrap gap-6">
+  <div class="tooltip tooltip-open tooltip-bottom tooltip-start" data-tip="hello">
+    <button class="btn">Bottom</button>
+  </div>
   <div class="tooltip tooltip-open tooltip-bottom" data-tip="hello">
     <button class="btn">Bottom</button>
   </div>
+  <div class="tooltip tooltip-open tooltip-bottom tooltip-end" data-tip="hello">
+    <button class="btn">Bottom</button>
+  </div>
 </div>
 
 ```html
@@ -123,10 +141,16 @@ classnames:
 
 
 ### ~Left
-<div class="my-6">
+<div class="my-6 flex flex-col gap-6">
+  <div class="tooltip tooltip-open tooltip-left tooltip-start" data-tip="hello">
+    <button class="btn">Left</button>
+  </div>
   <div class="tooltip tooltip-open tooltip-left" data-tip="hello">
     <button class="btn">Left</button>
   </div>
+  <div class="tooltip tooltip-open tooltip-left tooltip-end" data-tip="hello">
+    <button class="btn">Left</button>
+  </div>
 </div>
 
 ```html
@@ -137,10 +161,16 @@ classnames:
 
 
 ### ~Right
-<div class="my-6">
+<div class="my-6 flex flex-col gap-6">
+  <div class="tooltip tooltip-open tooltip-right tooltip-start" data-tip="hello">
+    <button class="btn">Right</button>
+  </div>
   <div class="tooltip tooltip-open tooltip-right" data-tip="hello">
     <button class="btn">Right</button>
   </div>
+  <div class="tooltip tooltip-open tooltip-right tooltip-end" data-tip="hello">
+    <button class="btn">Right</button>
+  </div>
 </div>
 
 ```html
@@ -274,3 +304,16 @@ classnames:
   <button class="$$btn">Hover me</button>
 </div>
 ```
+
+### ~Responsive tooltip position
+<div class="my-6">
+  <div class="tooltip tooltip-start md:tooltip-right md:tooltip-center" data-tip="hello">
+    <button class="btn">Hover me</button>
+  </div>
+</div>
+
+```html
+<div class="$$tooltip $$tooltip-start $$md:tooltip-right $$md:tooltip-center" data-tip="hello">
+  <button class="$$btn">Hover me</button>
+</div>
+```
diff --git a/packages/docs/src/routes/(routes)/docs/utilities/+page.md b/packages/docs/src/routes/(routes)/docs/utilities/+page.md
index 8f3cc4ce89a..5b245e3b1c8 100644
--- a/packages/docs/src/routes/(routes)/docs/utilities/+page.md
+++ b/packages/docs/src/routes/(routes)/docs/utilities/+page.md
@@ -222,7 +222,8 @@ If you are using a prefix for daisyUI, these CSS variables will be prefixed with
 |                 | `--size`                      | size of the toggle                                       |
 | Tooltip         | `--tt-bg`                     | background color of the tooltip                          |
 |                 | `--tt-off`                    | offset of the tooltip                                    |
-|                 | `--tt-tailw`                  | position of the tooltip tail                             |
+|                 | `--tt-tail`                   | position of the tooltip tail                             |
+|                 | `--tt-tail-off`               | offset of the tooltip tail from start/end                |
 | Glass           | `--glass-blur`                | blur of the glass effect                                 |
 |                 | `--glass-opacity`             | opacity of the glass effect                              |
 |                 | `--glass-reflect-degree`      | degree of the glass reflection                           |

From e8adf24c37dde3d7ecb1f12ecbc6e5c0b1158744 Mon Sep 17 00:00:00 2001
From: Dan Popescu <pdan.popescu@gmail.com>
Date: Sat, 10 Jan 2026 04:57:59 +0200
Subject: [PATCH 2/2] chore: formatting

---
 packages/daisyui/src/components/tooltip.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/daisyui/src/components/tooltip.css b/packages/daisyui/src/components/tooltip.css
index a212e753733..5bc3b7064ac 100644
--- a/packages/daisyui/src/components/tooltip.css
+++ b/packages/daisyui/src/components/tooltip.css
@@ -105,7 +105,8 @@
   @layer daisyui.l1.l2 {
     > .tooltip-content,
     &[data-tip]:before {
-      transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem)) translateY(var(--tt-trans, -50%));
+      transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem))
+        translateY(var(--tt-trans, -50%));
       inset-inline: auto var(--tt-off);
       inset-block: var(--tt-inset, 50% auto);
     }
@@ -122,7 +123,8 @@
   @layer daisyui.l1.l2 {
     > .tooltip-content,
     &[data-tip]:before {
-      transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem)) translateY(var(--tt-trans, -50%));
+      transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem))
+        translateY(var(--tt-trans, -50%));
       inset-inline: var(--tt-off) auto;
       inset-block: var(--tt-inset, 50% auto);
     }