;
}
};
Peek blocks compose `Popover` with Anvil2 layout and content components to preview an entity's key details on hover. Each example below is a starting point: copy it, then adapt the content and dimensions to your data. For guidance on when a peek is the right pattern, see the Peek pattern.
## Resources
When to use peeks and related guidance.
Figma reference implementations for peek popover lockups.
## Demo
Demonstrates the core peek behavior: a `Popover` that opens on hover to preview a customer's identity, status, and balance. Use this as the starting point for most peeks.
```tsx lines theme={null}
import { Popover, Flex, Text, Chip, Avatar, Grid } from "@servicetitan/anvil2";
function App() {
return (
Hover to see peek behavior
Customer
Costco Wholesale Corporation
123 Main Street Glendale CA 12345
Tags
Balance due
$1,503.00
Credit
$0.00
);
}
export default App;
```
## Usage
Pairs an `Avatar` with a name and a supporting line. Use for a minimal identity peek when only the entity's name and status matter.
```tsx lines theme={null}
import { Popover, Flex, Text, Avatar } from "@servicetitan/anvil2";
function App() {
return (
Jane DoeJane Doe
Customer since 2018
);
}
export default App;
```
## Activity Feed
Stacks recent events in `Card` rows beneath a header with quick actions. Use to surface an entity's latest activity, such as mentions, updates, and reminders.
```tsx lines theme={null}
import {
Popover,
Flex,
Text,
Button,
Card,
Grid,
Avatar,
} from "@servicetitan/anvil2";
import BorderClear from "@servicetitan/anvil2/assets/icons/material/round/border_clear.svg";
function App() {
return (
Recent Activity
Activity
John mentioned you{" "}
9:55am
If this is lorem ipsum, then what is not lorem ipsum?
Consider this.
Jane Doe updated a job appointment{" "}
Yesterday
Only [x jobs] remaining to work.
ST Calendar{" "}
3 months ago
5 minutes until this event: Hello.
);
}
export default App;
```
## Summary
Combines an identity header, a `Divider`, and a `Toolbar` of contact actions. Use when the peek should both identify the entity and offer immediate next steps.
```tsx lines theme={null}
import {
Popover,
Flex,
Avatar,
Text,
Toolbar,
Divider,
} from "@servicetitan/anvil2";
import Mail from "@servicetitan/anvil2/assets/icons/material/round/mail.svg";
import Chat from "@servicetitan/anvil2/assets/icons/material/round/chat.svg";
import Phone from "@servicetitan/anvil2/assets/icons/material/round/phone.svg";
import Event from "@servicetitan/anvil2/assets/icons/material/round/event.svg";
import History from "@servicetitan/anvil2/assets/icons/material/round/history.svg";
function App() {
return (
Jane DoeJane Doe
Customer since 2018
console.log("Settings clicked")}
>
Settings
,
console.log("Help clicked")}
>
Help
,
]}
overflow="collapse"
>
console.log("Email clicked")}
aria-label="Email"
/>
console.log("Chat clicked")}
aria-label="Chat"
/>
console.log("Call clicked")}
aria-label="Call"
/>
console.log("Schedule event clicked")}
aria-label="Schedule event"
/>
console.log("Jobs list clicked")}
aria-label="Jobs list"
/>
);
}
export default App;
```
## Simple
Presents an identity header above a collapsing `Toolbar`. Use for a compact peek that keeps actions available while letting them collapse into an overflow menu when space is limited.
```tsx lines theme={null}
import { Popover, Flex, Avatar, Text, Toolbar } from "@servicetitan/anvil2";
import Phone from "@servicetitan/anvil2/assets/icons/material/round/phone.svg";
import Mail from "@servicetitan/anvil2/assets/icons/material/round/mail.svg";
import Location from "@servicetitan/anvil2/assets/icons/material/round/location_on.svg";
function App() {
return (
Jane DoeJane Doe
Customer since 2018
console.log("Call clicked")}
aria-label="Call"
justifyContent="start"
>
+1 (555) 555-5555
console.log("Email clicked")}
aria-label="Email"
justifyContent="start"
>
janedoe@servicetitan.com
console.log("Address clicked")}
aria-label="Address"
justifyContent="start"
>
123 Main Street Glendale CA 91203
);
}
export default App;
```
## Activity Feed With Actions
Extends the activity feed with a `Button` on each row. Use when every item needs its own action, such as approve or view.
```tsx lines theme={null}
import { Popover, Flex, Text, Button, Card, Grid } from "@servicetitan/anvil2";
import BorderClear from "@servicetitan/anvil2/assets/icons/material/round/border_clear.svg";
function App() {
return (
Trigger
Activity
Subheader
Lorem ipsum dolar emit, nesciunt quia dolor abLorem ipsum dolar emit, nesciunt quia dolor abOne liner
This is will be a third liner just to see what happens
here, lorem ipsum emit.
);
}
export default App;
```
## Empty
Shows an empty-state message inside the peek. Use when an entity has no data to preview yet.
```tsx lines theme={null}
import { Popover, Text, Flex, Icon } from "@servicetitan/anvil2";
import BorderClear from "@servicetitan/anvil2/assets/icons/material/round/border_clear.svg";
function App() {
return (
Trigger
Header Text
This is a potential empty state message, if you needed one.
);
}
export default App;
```
## Max Width Max Height
Constrains `Popover.Content` to the suggested maximum dimensions. Use as a reference for sizing peek content and keeping it within the recommended bounds.
```tsx lines theme={null}
import { Popover, Flex, Text } from "@servicetitan/anvil2";
function App() {
return (
Trigger
Inner Popover content suggested max dimensions (16px padding):
328px width
508px height
);
}
export default App;
```
