diff --git a/packages/daisyui/src/components/tooltip.css b/packages/daisyui/src/components/tooltip.css index 770c783e6db..5bc3b7064ac 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,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); } } } @@ -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); 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 -
+
+
+ +
+
+ +
```html @@ -109,10 +121,16 @@ classnames: ### ~Bottom -
+
+
+ +
+
+ +
```html @@ -123,10 +141,16 @@ classnames: ### ~Left -
+
+
+ +
+
+ +
```html @@ -137,10 +161,16 @@ classnames: ### ~Right -
+
+
+ +
+
+ +
```html @@ -274,3 +304,16 @@ classnames:
``` + +### ~Responsive tooltip position +
+
+ +
+
+ +```html +
+ +
+``` 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 |