## HoverCard  
Use HoverCard component to show more information in a popover.  
Category: Overlay  

### Simple Example

```python
import dash_mantine_components as dmc
from dash import html, Output, Input

component = dmc.HoverCard(
    withArrow=True,
    width=200,
    shadow="md",
    children=[
        dmc.HoverCardTarget(dmc.Button("Hover to reveal the card")),
        dmc.HoverCardDropdown(
            dmc.Text(
                "Hover card is revealed when user hovers over target element, it will be hidden once mouse is not over",
                size="sm",
            )
        ),
    ],
)
```
### Delays

Set open and close delays in ms with `openDelay` and `closeDelay` properties.

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.HoverCard(
            shadow="md",
            openDelay=1000,
            children=[
                dmc.HoverCardTarget(dmc.Button("1000ms open delay")),
                dmc.HoverCardDropdown(dmc.Text("Opened with 1000ms delay", size="sm")),
            ],
        ),
        dmc.HoverCard(
            shadow="md",
            closeDelay=1000,
            children=[
                dmc.HoverCardTarget(dmc.Button("1000ms close delay")),
                dmc.HoverCardDropdown(dmc.Text("Closed with 1000ms delay", size="sm")),
            ],
        ),
    ]
)
```
### With Interactive elements

HoverCard is displayed only when mouse is over target element or dropdown, you can use anchors and buttons within dropdowns, using inputs is not recommended.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = (
    dmc.HoverCard(
        shadow="md",
        children=[
            dmc.HoverCardTarget(
                dmc.Avatar(
                    src="https://avatars.githubusercontent.com/u/91216500?v=4",
                    radius="xl",
                )
            ),
            dmc.HoverCardDropdown(
                [
                    dmc.Button(
                        "Snehil Vijay", fullWidth=True, mb=15, variant="outline"
                    ),
                    dmc.Group(
                        [
                            dmc.Anchor(
                                DashIconify(icon="logos:linkedin-icon", width=30),
                                href="https://www.linkedin.com/in/snehilvj/",
                                target="_blank",
                            ),
                            dmc.Anchor(
                                DashIconify(icon="logos:github-octocat", width=30),
                                href="https://www.github.com/snehilvj/",
                                target="_blank",
                            ),
                            dmc.Anchor(
                                DashIconify(icon="logos:twitter", width=30),
                                href="https://twitter.com/snehilvj",
                                target="_blank",
                            ),
                        ],
                        p=0,
                    ),
                ]
            ),
        ],
    ),
)
```
### HoverCard Target

Any component you specify in dmc.HoverCardTarget is wrapped by a dmc.Box component under the hood. So adding a margin
to your target component will also move the dropdown away. In order to prevent this, add margin to the wrapper component
using the prop `boxWrapperProps` in dmc.HoverCardTarget.

### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


| Name     | Static selector             | Description      |
|:---------|:----------------------------|:-----------------|
| dropdown | .mantine-HoverCard-dropdown | Dropdown element |
| arrow    | .mantine-HoverCard-arrow    | Dropdown arrow   |


### Keyword Arguments
#### HoverCard

- children (a list of or a singular dash component, string or number; optional):
    `Popover.Target` and `Popover.Dropdown` components.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- arrowOffset (number; optional):
    Arrow offset in px, `5` by default.

- arrowPosition (a value equal to: 'center', 'side'; optional):
    Arrow position.

- arrowRadius (number; optional):
    Arrow `border-radius` in px, `0` by default.

- arrowSize (number; optional):
    Arrow size in px, `7` by default.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- clickOutsideEvents (list of strings; optional):
    Events that trigger outside clicks.

- closeDelay (number; optional):
    Close delay in ms.

- closeOnClickOutside (boolean; optional):
    Determines whether dropdown should be closed on outside clicks,
    `True` by default.

- closeOnEscape (boolean; optional):
    Determines whether dropdown should be closed when `Escape` key is
    pressed, `True` by default.

- data-* (string; optional):
    Wild card data attributes.

- disabled (boolean; optional):
    If set, popover dropdown will not be rendered.

- floatingStrategy (a value equal to: 'absolute', 'fixed'; optional):
    Changes floating ui [position
    strategy](https://floating-ui.com/docs/usefloating#strategy),
    `'absolute'` by default.

- hideDetached (boolean; optional):
    If set, the dropdown is hidden when the element is hidden with
    styles or not visible on the screen, `True` by default.

- keepMounted (boolean; optional):
    If set dropdown will not be unmounted from the DOM when it is
    hidden, `display: none` styles will be added instead.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- middlewares (dict; optional):
    Floating ui middlewares to configure position handling, `{ flip:
    True, shift: True, inline: False }` by default.

    `middlewares` is a dict with keys:

- offset (number; optional):
    Offset of the dropdown element, `8` by default.

- openDelay (number; optional):
    Open delay in ms.

- overlayProps (dict; optional):
    Props passed down to `Overlay` component.

- portalProps (dict; optional):
    Props to pass down to the `Portal` when `withinPortal` is True.

- position (a value equal to: 'top', 'right', 'bottom', 'left', 'top-end', 'top-start', 'right-end', 'right-start', 'bottom-end', 'bottom-start', 'left-end', 'left-start'; optional):
    Dropdown position relative to the target element, `'bottom'` by
    default.

- positionDependencies (list of boolean | number | string | dict | lists; optional):
    `useEffect` dependencies to force update dropdown position, `[]`
    by default.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set border-radius,
    `theme.defaultRadius` by default.

- returnFocus (boolean; optional):
    Determines whether focus should be automatically returned to
    control when dropdown closes, `False` by default.

- shadow (optional):
    Key of `theme.shadows` or any other valid CSS `box-shadow` value.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- transitionProps (dict; optional):
    Props passed down to the `Transition` component that used to
    animate dropdown presence, use to configure duration and animation
    type, `{ duration: 150, transition: 'fade' }` by default.

    `transitionProps` is a dict with keys:

- trapFocus (boolean; optional):
    Determines whether focus should be trapped within dropdown,
    `False` by default.

- variant (string; optional):
    variant.

- width (string | number; optional):
    Dropdown width, or `'target'` to make dropdown width the same as
    target element, `'max-content'` by default.

- withArrow (boolean; optional):
    Determines whether component should have an arrow, `False` by
    default.

- withOverlay (boolean; optional):
    Determines whether the overlay should be displayed when the
    dropdown is opened, `False` by default.

- withRoles (boolean; optional):
    Determines whether dropdown and target elements should have
    accessible roles, `True` by default.

- withinPortal (boolean; optional):
    Determines whether dropdown should be rendered within the
    `Portal`, `True` by default.

- zIndex (string | number; optional):
    Dropdown `z-index`, `300` by default.
#### HoverCardDropdown

- children (a list of or a singular dash component, string or number; required):
    Content.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.
#### HoverCardTarget

- children (a list of or a singular dash component, string or number; required):
    Content.

- boxWrapperProps (dict; optional):
    Target box wrapper props.

    `boxWrapperProps` is a dict with keys: