Skip to content

feat(tooltip): add alignment utility classes (start, center, end) #4363

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pdanpdan wants to merge 2 commits into
base: master
Choose a base branch
from
+101 −21
Open

feat(tooltip): add alignment utility classes (start, center, end) #4363

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fc7e710
feat(tooltip): add alignment utility classes (start, center, end)
pdanpdan Dec 31, 2025
e8adf24
chore: formatting
pdanpdan Jan 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 52 additions & 16 deletions packages/daisyui/src/components/tooltip.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
}
}
}
Expand All @@ -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;
}
}
}
Expand All @@ -99,13 +105,16 @@
@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);
}
}
}
Expand All @@ -114,17 +123,44 @@
@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);
Expand Down
51 changes: 47 additions & 4 deletions packages/docs/src/routes/(routes)/components/tooltip/+page.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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>
```
3 changes: 2 additions & 1 deletion packages/docs/src/routes/(routes)/docs/utilities/+page.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down