;
}
};
Peeks are product-specific lockups of popovers that appear on hover. They show a "peek" to the user of the info they would see on the page if they were to click through to the associated entity.
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 Guidance
Peeks are triggered by hovering over an element such as text or an icon. That element should be an action or link that drives the user to where they can see the information contained in the Peek.
Peeks should be thought of as an enhancement for mouse-users. As a result they shouldn't display information that is integral to understanding the Peek target or for taking actions on the target. Peeks are a "peek" into what the user will see if they click on the action/link.
```tsx lines theme={null}
import { Popover, Flex, Text, Avatar } from "@servicetitan/anvil2";
function App() {
return (
Jane DoeJane Doe
Customer since 2018
);
}
export default App;
```
#### Peeks should never convey exclusive information.
Any action or information contained in a Peek should be accessible elsewhere to the user, either on the current page or on the page that clicking the target would navigate them to.
```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;
```
#### Peeks content should be brief.
The larger your Peek is, the more it blocks other content on the page. Try and keep it small, even if there is more content that could be shown, such as here where you *could* display many more events.
```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;
```
#### Prioritize important information.
Peeks should only have a summary or quick actions relevant to its target, such as here where a user can call, email, or message the associated client.
```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;
```
#### Avoid complex interactions in the Peek.
If a more complex interaction is necessary, direct users to something that's better for handling interactions: traditional filtering, text fields, or drilldown flows. Another example of could be using a Dialog, or navigating the user to the page the target is related to. Simple actions, like the button clicks illustrated here for calling, messaging, or emailing the client, are fine.
```tsx lines theme={null}
import { Popover, Flex, Text, Chip, Avatar, Grid } from "@servicetitan/anvil2";
function App() {
return (
Costco Wholesale Corporation
Customer
Costco Wholesale Corporation
123 Main Street Glendale CA 12345
Tags
Balance due
$1,503.00
Credit
$0.00
);
}
export default App;
```
#### Peeks should be enhancements.
Think of Peeks like an enhancement: they are a preview of the extra information the user gets if they click through the button or link, such as here where you can see the information you'd see if you clicked through to the next page.
## Options
#### Open on Hover (default)
Peeks appear on hover over a trigger element by default. They do *not* trigger on element focus.
#### Delay
Peeks use the Popover default delay, which can be modified with the `delay` prop. See [Popover documentation](/docs/web/components/popover/design) for more. We don’t recommend setting this to 0ms.
#### Open on Click
An alternative interaction for Peek when its inner content has exclusive interactions (meaning a user can only perform a step through a Peek). This option is considered an edge case.
## Other Additional Layouts
Find some other possible options for peek below:
```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;
```
#### Activity Feed with Action Buttons
An example that demonstrates a sensible maximum height for a peek.
```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;
```
#### Empty Peek
An example empty peek that hints at the type of information the peek would have if there were content.
## Behaviors
#### Trapping focus
By default Peeks do not trap focus, but this can be enabled on Popover with the `modal` prop.
#### Suggested max-width, max-height
By default Popover lacks a max-height and max-width. For Peek, we suggest limiting the Popover (excluding the caret) to 360px wide and 540px tall.
```tsx lines theme={null}
import { Popover, Flex, Text } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### Keyboard Navigation and Accessibility
For detailed information on how keyboard interactions and accessibility work for Peek, refer to the [Popover](/docs/web/components/popover/design#keyboard-interactions) documentation.
## Peek Ownership
Peek is provided as a pattern, meaning that it isn't as prescriptive as a component. The suggested layouts are intended as grab-and-go options for your product team to use based on your products' needs.
