Skip to content

[New navigation] Use custom offset in EuiTooltip #234553

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 7 commits into from
Sep 16, 2025
Merged

[New navigation] Use custom offset in EuiTooltip #234553

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1c6d09e
[ML] Removes unused translation (#230055)
rbrtj Jul 31, 2025
fa032c4
[SideNav] Add custom tooltip offset as per design
paulinashakirova Sep 10, 2025
dea6b27
Merge branch 'main' into new-navigation-custom-offset-popover
paulinashakirova Sep 12, 2025
34af818
Merge branch 'main' into new-navigation-custom-offset-popover
paulinashakirova Sep 12, 2025
93e6a85
unify tooltip for all cases
paulinashakirova Sep 15, 2025
6c9266c
Merge branch 'main' into new-navigation-custom-offset-popover
elasticmachine Sep 15, 2025
0ff77f4
fix mistake of renaming
paulinashakirova Sep 15, 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
2 changes: 2 additions & 0 deletions src/core/packages/chrome/navigation/src/components/side_nav/footer_item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { EuiButtonIcon, EuiToolTip, useEuiTheme } from '@elastic/eui';
import type { MenuItem } from '../../../types';
import { useTooltip } from '../../hooks/use_tooltip';
import { BetaBadge } from '../beta_badge';
import { TOOLTIP_OFFSET } from '../../constants';

export interface SideNavFooterItemProps extends Omit<EuiButtonIconProps, 'iconType'>, MenuItem {
hasContent?: boolean;
Expand Down Expand Up @@ -81,6 +82,7 @@ export const SideNavFooterItem = forwardRef<HTMLDivElement, SideNavFooterItemPro
onMouseOut={handleMouseOut}
position="right"
repositionOnScroll
offset={TOOLTIP_OFFSET}
>
{menuItem}
</EuiToolTip>
Expand Down
2 changes: 2 additions & 0 deletions src/core/packages/chrome/navigation/src/components/side_nav/primary_menu_item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import type { MenuItem } from '../../../types';
import { MenuItem as MenuItemComponent } from '../menu_item';
import { useTooltip } from '../../hooks/use_tooltip';
import { BetaBadge } from '../beta_badge';
import { TOOLTIP_OFFSET } from '../../constants';

export interface SideNavPrimaryMenuItemProps extends MenuItem {
as?: 'a' | 'button';
Expand Down Expand Up @@ -116,6 +117,7 @@ export const SideNavPrimaryMenuItem = forwardRef<HTMLAnchorElement, SideNavPrima
onMouseOut={handleMouseOut}
position="right"
repositionOnScroll
offset={TOOLTIP_OFFSET}
>
{menuItem}
</EuiToolTip>
Expand Down
1 change: 1 addition & 0 deletions src/core/packages/chrome/navigation/src/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,4 @@ export const TOP_BAR_HEIGHT = 48;
export const TOP_BAR_POPOVER_GAP = 8;
export const BOTTOM_POPOVER_GAP = 17;
export const POPOVER_OFFSET = 5;
Copy link
Contributor

@weronikaolejniczak weronikaolejniczak Sep 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@paulinashakirova Why is POPOVER_OFFSET changed here to TOOLTIP_OFFSET?

Copy link
Contributor Author

@paulinashakirova paulinashakirova Sep 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They got merged locally at some point, but I’ve split them out now.
Nice catch — appreciate you calling it out 👍

export const TOOLTIP_OFFSET = 4;
Copy link
Contributor

@weronikaolejniczak weronikaolejniczak Sep 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ek-so what do you think about this value? Should we have 2 different ones for collapsed and expanded mode?

Copy link
Contributor

@ek-so ek-so Sep 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@weronikaolejniczak thanks for tagging! I took a look already, I think it's fine