import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Tooltip, { Marker } from "./index";
import { Box, Row } from "../grid";
import Space from "../space";
export default {
    title: "Misc/Tooltip",
    component: Tooltip,
};
export const InfoTooltip = () => {
    return (_jsx(Box, { mt: "100px", p: "0 20px", children: _jsxs(Row, { children: [_jsxs("div", { style: { display: "flex", alignItems: "center" }, children: ["On click:", _jsx(Tooltip, { as: "span", openOn: "click", content: _jsx("div", { style: { whiteSpace: "nowrap" }, children: "top right" }), right: true, children: _jsx(Marker.Info, {}) })] }), _jsx(Space, { width: 40, widthMobile: 40 }), _jsxs("div", { style: { display: "flex", alignItems: "center" }, children: ["On hover:", _jsx(Tooltip, { as: "span", openOn: "hover", content: _jsx("div", { children: "bottom left" }), bottom: true, children: _jsx(Marker.Question, {}) })] })] }) }));
};
//# sourceMappingURL=index.stories.js.map