diff --git a/docs/src/docs/changelog/5-5-0.mdx b/docs/src/docs/changelog/5-5-0.mdx
index 78ea148c641..b9e36543036 100644
--- a/docs/src/docs/changelog/5-5-0.mdx
+++ b/docs/src/docs/changelog/5-5-0.mdx
@@ -13,6 +13,7 @@ import {
CheckboxDemos,
ModalDemos,
TooltipDemos,
+ PopoverDemos,
} from '@mantine/demos';
## Global styles on theme
@@ -74,13 +75,14 @@ components now support `error`, `description` and `labelPosition` props:
-## Inline tooltips
+## Inline Tooltip and Popover
-[Tooltip](https://mantine.dev/core/tooltip/) component now supports `inline` prop that makes is possible
-to position tooltip correctly when inline element is a target:
+[Tooltip](https://mantine.dev/core/tooltip/) and [Popover](https://mantine.dev/core/popover/) components now can be used with inline elements:
+
+
## Autosize Modal
[Modal](https://mantine.dev/core/modal/) component now supports `size="auto"`:
diff --git a/docs/src/docs/core/Popover.mdx b/docs/src/docs/core/Popover.mdx
index e7252e0191e..50172997c41 100644
--- a/docs/src/docs/core/Popover.mdx
+++ b/docs/src/docs/core/Popover.mdx
@@ -52,10 +52,16 @@ Controlled example with focus events:
## Focus trap
-If you need to use any interactive elements within Popover, set `trapFocus` prop:
+If you need to use any interactive elements within `Popover`, set `trapFocus` prop:
+## Inline elements
+
+Enable `inline` middleware to use `Popover` with inline elements:
+
+
+
## Same width
Set `width="target"` prop to make Popover dropdown take the same width as target element:
diff --git a/src/mantine-core/src/Popover/Popover.story.tsx b/src/mantine-core/src/Popover/Popover.story.tsx
index 746502c47fd..e3b902307e8 100644
--- a/src/mantine-core/src/Popover/Popover.story.tsx
+++ b/src/mantine-core/src/Popover/Popover.story.tsx
@@ -152,3 +152,20 @@ export function WithMultiSelect() {
);
}
+
+export function Inline() {
+ return (
+
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae ipsam in quos aperiam magni
+ quas neque{' '}
+
+
+ aliquid laboriosam dolorum
+
+ Inline popover
+
+ , eum voluptate, perferendis placeat repudiandae nesciunt explicabo quibusdam deserunt, animi
+ dicta.
+
+ );
+}
diff --git a/src/mantine-core/src/Popover/Popover.tsx b/src/mantine-core/src/Popover/Popover.tsx
index 990c1d4bf49..ef4a5cf2947 100644
--- a/src/mantine-core/src/Popover/Popover.tsx
+++ b/src/mantine-core/src/Popover/Popover.tsx
@@ -127,7 +127,7 @@ const defaultProps: Partial = {
positionDependencies: [],
transition: 'fade',
transitionDuration: 150,
- middlewares: { flip: true, shift: true },
+ middlewares: { flip: true, shift: true, inline: false },
arrowSize: 7,
arrowOffset: 5,
closeOnClickOutside: true,
diff --git a/src/mantine-core/src/Popover/Popover.types.ts b/src/mantine-core/src/Popover/Popover.types.ts
index 18afdcab06a..1d3049a1797 100644
--- a/src/mantine-core/src/Popover/Popover.types.ts
+++ b/src/mantine-core/src/Popover/Popover.types.ts
@@ -10,4 +10,5 @@ export type PopoverWidth = 'target' | React.CSSProperties['width'];
export interface PopoverMiddlewares {
shift: boolean;
flip: boolean;
+ inline?: boolean;
}
diff --git a/src/mantine-core/src/Popover/use-popover.ts b/src/mantine-core/src/Popover/use-popover.ts
index 684656c5964..478c6e28d46 100644
--- a/src/mantine-core/src/Popover/use-popover.ts
+++ b/src/mantine-core/src/Popover/use-popover.ts
@@ -7,6 +7,7 @@ import {
offset,
size,
Middleware,
+ inline,
} from '@floating-ui/react-dom-interactions';
import { FloatingPosition, useFloatingAutoUpdate } from '../Floating';
import { PopoverWidth, PopoverMiddlewares } from './Popover.types';
@@ -37,6 +38,10 @@ function getPopoverMiddlewares(options: UsePopoverOptions) {
middlewares.push(flip());
}
+ if (options.middlewares.inline) {
+ middlewares.push(inline());
+ }
+
middlewares.push(arrow({ element: options.arrowRef }));
return middlewares;
diff --git a/src/mantine-demos/src/demos/core/Popover/Popover.demo.inline.tsx b/src/mantine-demos/src/demos/core/Popover/Popover.demo.inline.tsx
new file mode 100644
index 00000000000..f6a180dfee4
--- /dev/null
+++ b/src/mantine-demos/src/demos/core/Popover/Popover.demo.inline.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { MantineDemo } from '@mantine/ds';
+import { Popover, Mark, Text } from '@mantine/core';
+
+const code = `
+import { Popover, Mark, Text } from '@mantine/core';
+
+function Demo() {
+ return (
+
+ Stantler’s magnificent antlers were traded at high prices as works of art. As a result, this
+ Pokémon was hunted close to extinction by those who were after the priceless antlers.{' '}
+
+
+ When visiting a junkyard
+
+ Inline dropdown
+
+ , you may catch sight of it having an intense fight with Murkrow over shiny objects.Ho-Oh’s
+ feathers glow in seven colors depending on the angle at which they are struck by light. These
+ feathers are said to bring happiness to the bearers. This Pokémon is said to live at the foot
+ of a rainbow.
+
+ );
+}
+`;
+
+function Demo() {
+ return (
+
+ Stantler’s magnificent antlers were traded at high prices as works of art. As a result, this
+ Pokémon was hunted close to extinction by those who were after the priceless antlers.{' '}
+
+
+ When visiting a junkyard
+
+ Inline dropdown
+
+ , you may catch sight of it having an intense fight with Murkrow over shiny objects.Ho-Oh’s
+ feathers glow in seven colors depending on the angle at which they are struck by light. These
+ feathers are said to bring happiness to the bearers. This Pokémon is said to live at the foot
+ of a rainbow.
+
+ );
+}
+
+export const inline: MantineDemo = {
+ type: 'demo',
+ component: Demo,
+ code,
+};
diff --git a/src/mantine-demos/src/demos/core/Popover/index.ts b/src/mantine-demos/src/demos/core/Popover/index.ts
index 30af08e1cb8..b66d88f3a51 100644
--- a/src/mantine-demos/src/demos/core/Popover/index.ts
+++ b/src/mantine-demos/src/demos/core/Popover/index.ts
@@ -3,3 +3,4 @@ export { form } from './Popover.demo.form';
export { hover } from './Popover.demo.hover';
export { sameWidth } from './Popover.demo.sameWidth';
export { arrow } from './Popover.demo.arrow';
+export { inline } from './Popover.demo.inline';