Skip to content

feat: add arrow size property #1251

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

Merged
merged 3 commits into from
Jun 10, 2025
Merged

feat: add arrow size property #1251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5d0eb7d
feat: add arrow size property
WoodyWoodsta Jun 6, 2025
4ed5543
docs: add new option to documentation
WoodyWoodsta Jun 10, 2025
bf5d4fd
feat: add arrow size custom property to the root tokens
WoodyWoodsta Jun 10, 2025
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
95 changes: 48 additions & 47 deletions docs/docs/options.mdx
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions src/components/Tooltip/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ const Tooltip = ({
border,
opacity,
arrowColor,
arrowSize = 8,
role = 'tooltip',
}: ITooltip) => {
const tooltipRef = useRef<HTMLElement>(null)
Expand Down Expand Up @@ -345,6 +346,7 @@ const Tooltip = ({
strategy: positionStrategy,
middlewares,
border,
arrowSize,
}).then((computedStylesData) => {
handleComputedPosition(computedStylesData)
})
Expand Down Expand Up @@ -437,6 +439,7 @@ const Tooltip = ({
strategy: positionStrategy,
middlewares,
border,
arrowSize,
}).then((computedStylesData) => {
if (!mounted.current) {
// invalidate computed positions after remount
Expand All @@ -456,6 +459,7 @@ const Tooltip = ({
position,
imperativeOptions?.position,
float,
arrowSize,
])

useEffect(() => {
Expand Down Expand Up @@ -899,6 +903,7 @@ const Tooltip = ({
background: arrowColor
? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
: undefined,
'--rt-arrow-size': `${arrowSize}px`,
}}
ref={tooltipArrowRef}
/>
Expand Down
1 change: 1 addition & 0 deletions src/components/Tooltip/TooltipTypes.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,5 +158,6 @@ export interface ITooltip {
border?: CSSProperties['border']
opacity?: CSSProperties['opacity']
arrowColor?: CSSProperties['backgroundColor']
arrowSize?: number
role?: React.AriaRole
}
1 change: 1 addition & 0 deletions src/components/Tooltip/core-styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
.arrow {
position: absolute;
background: inherit;
z-index: -1;
}

.noArrow {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Tooltip/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
}

.arrow {
width: 8px;
height: 8px;
width: var(--rt-arrow-size);
height: var(--rt-arrow-size);
}

[class*='react-tooltip__place-top'] > .arrow {
Expand Down
2 changes: 2 additions & 0 deletions src/components/TooltipController/TooltipController.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
border,
opacity,
arrowColor,
arrowSize,
setIsOpen,
afterShow,
afterHide,
Expand Down Expand Up @@ -368,6 +369,7 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
border,
opacity,
arrowColor,
arrowSize,
setIsOpen,
afterShow,
afterHide,
Expand Down
1 change: 1 addition & 0 deletions src/components/TooltipController/TooltipControllerTypes.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ export interface ITooltipController {
border?: CSSProperties['border']
opacity?: CSSProperties['opacity']
arrowColor?: CSSProperties['backgroundColor']
arrowSize?: number
setIsOpen?: (value: boolean) => void
afterShow?: () => void
afterHide?: () => void
Expand Down
6 changes: 3 additions & 3 deletions src/test/__snapshots__/tooltip-attributes.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ exports[`tooltip attributes basic tooltip 1`] = `
Hello World!
<div
class="react-tooltip-arrow"
style="left: -1px; bottom: -4px;"
style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
/>
</div>
</div>
Expand All @@ -41,7 +41,7 @@ exports[`tooltip attributes tooltip with class name 1`] = `
Hello World!
<div
class="react-tooltip-arrow"
style="left: -1px; bottom: -4px;"
style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
/>
</div>
</div>
Expand All @@ -65,7 +65,7 @@ exports[`tooltip attributes tooltip with place 1`] = `
Hello World!
<div
class="react-tooltip-arrow"
style="left: -4px; top: -1px;"
style="--rt-arrow-size: 8px; left: -4px; top: -1px;"
/>
</div>
</div>
Expand Down
16 changes: 8 additions & 8 deletions src/test/__snapshots__/tooltip-props.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ exports[`tooltip props basic tooltip 1`] = `
Hello World!
<div
class="react-tooltip-arrow"
style="left: -1px; bottom: -4px;"
style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
/>
</div>
</div>
Expand All @@ -40,7 +40,7 @@ exports[`tooltip props clickable tooltip 1`] = `
</button>
<div
class="react-tooltip-arrow"
style="left: -1px; bottom: -4px;"
style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
/>
</div>
</div>
Expand All @@ -62,7 +62,7 @@ exports[`tooltip props tooltip with custom position 1`] = `
Hello World!
<div
class="react-tooltip-arrow"
style="left: -1px; bottom: -4px;"
style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
/>
</div>
</div>
Expand Down Expand Up @@ -94,7 +94,7 @@ exports[`tooltip props tooltip with delay show 1`] = `
Hello World!
<div
class="react-tooltip-arrow"
style="left: -1px; bottom: -4px;"
style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
/>
</div>
</div>
Expand All @@ -116,7 +116,7 @@ exports[`tooltip props tooltip with disableTooltip return false 1`] = `
Hello World!
<div
class="react-tooltip-arrow"
style="left: -1px; bottom: -4px;"
style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
/>
</div>
</div>
Expand All @@ -138,7 +138,7 @@ exports[`tooltip props tooltip with float 1`] = `
Hello World!
<div
class="react-tooltip-arrow"
style="left: -1px; bottom: -4px;"
style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
/>
</div>
</div>
Expand All @@ -165,7 +165,7 @@ exports[`tooltip props tooltip with html 1`] = `
</span>
<div
class="react-tooltip-arrow"
style="left: -1px; bottom: -4px;"
style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
/>
</div>
</div>
Expand All @@ -187,7 +187,7 @@ exports[`tooltip props tooltip with place 1`] = `
Hello World!
<div
class="react-tooltip-arrow"
style="left: -4px; top: -1px;"
style="--rt-arrow-size: 8px; left: -4px; top: -1px;"
/>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,5 @@
--rt-opacity: 0.9;
--rt-transition-show-delay: 0.15s;
--rt-transition-closing-delay: 0.15s;
--rt-arrow-size: 8px;
}
1 change: 1 addition & 0 deletions src/utils/compute-tooltip-position-types.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export interface IComputePositionArgs {
strategy?: 'absolute' | 'fixed'
middlewares?: Middleware[]
border?: CSSProperties['border']
arrowSize?: number
}

export interface IComputedPosition {
Expand Down
3 changes: 2 additions & 1 deletion src/utils/compute-tooltip-position.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const computeTooltipPosition = async ({
shift({ padding: 5 }),
],
border,
arrowSize = 8,
}: IComputePositionArgs) => {
if (!elementReference) {
// elementReference can be null or undefined and we will not compute the position
Expand Down Expand Up @@ -78,7 +79,7 @@ const computeTooltipPosition = async ({
right: '',
bottom: '',
...borderSide,
[staticSide]: `-${4 + borderWidth}px`,
[staticSide]: `-${arrowSize / 2 + borderWidth}px`,
}
/* c8 ignore end */

Expand Down
Loading