import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { t } from "ttag";
import styled from "styled-components";
import { HoverTooltip } from "./index";
import Card from "../card";
import Text from "../text";
import { Box } from "../grid";
export default {
    title: "Misc/Hover tooltip",
    component: HoverTooltip,
};
const Wrapper = styled(Card) `
  position: relative;
  padding: 16px;
  width: 200px;
  height: 120px;
`;
export const Basic = () => {
    const [showTooltip, setShowTooltip] = React.useState(false);
    return (_jsx(Box, { mt: "200px", children: _jsxs(Wrapper, { onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(Text.T4, { textAlign: "center", children: t `Example card` }), showTooltip ? (_jsx(HoverTooltip, { top: "-90px", left: "50%", width: "100px", height: "100px", children: _jsx(Text.F1, { children: t `Example hover tooltip` }) })) : null] }) }));
};
//# sourceMappingURL=index.stories.js.map