Smart card - Hover card

Overview

Examples

Reference

Hover cards can be used as a standalone component to wrap any other React component to display information about a supplied URL upon hovering on the child component. Depending on the resource type, different actions will be displayed. For hover preview on Smart Links (standalone and inside Editor), please see inline card.

Hover over me

Prerequisites

The following packages are @atlaskit/smart-card's peer dependencies and required for Smart Links to function properly. Please check our package.json, (opens new window) for versioning.

react
react-dom
react-intl-next
@atlaskit/link-provider

Usage

import { IntlProvider } from 'react-intl-next';
import { CardClient, SmartCardProvider } from '@atlaskit/link-provider';
import { HoverCard } from '@atlaskit/smart-card/hover-card';
import { Box } from '@atlaskit/primitives';

// To use staging environment, you must be logged in at
// https://pug.jira-dev.com
<IntlProvider locale="en">
	<SmartCardProvider client={new CardClient('stg')}>
		<HoverCard url="https://www.atlassian.com/">
			<Box>Hover over me!</Box>
		</HoverCard>
	</SmartCardProvider>
</IntlProvider>