@seasketch/geoprocessing
Version:
Geoprocessing and reporting framework for SeaSketch 2.0
38 lines • 1.61 kB
JavaScript
import React from "react";
import Card from "./Card.js";
import { Tooltip } from "./Tooltip.js";
import ReportDecorator from "./storybook/ReportDecorator.js";
import { InfoCircleFill } from "@styled-icons/bootstrap";
export default {
component: Tooltip,
title: "Components/Tooltip",
decorators: [ReportDecorator],
};
export const tooltip = () => (React.createElement(Card, { title: "Report Title" },
React.createElement("p", null,
"Tooltip over text:",
" ",
React.createElement(Tooltip, { text: "This is a tooltip" },
React.createElement("span", null, "Hover"))),
React.createElement("p", null,
"Tooltip over icon:",
" ",
React.createElement(Tooltip, { text: "This is a tooltip" },
React.createElement(InfoCircleFill, { size: 14, style: {
color: "#83C6E6",
} }))),
React.createElement("p", null,
"Tooltip with specific width:",
" ",
React.createElement(Tooltip, { text: "This is a tooltip", width: 50 },
React.createElement(InfoCircleFill, { size: 14, style: {
color: "#83C6E6",
} }))),
React.createElement("p", null,
"Tooltip with top-start placement and 10px offset:",
" ",
React.createElement(Tooltip, { text: "This is a tooltip", placement: "top-start", offset: { horizontal: 10, vertical: 10 } },
React.createElement(InfoCircleFill, { size: 14, style: {
color: "#83C6E6",
} })))));
//# sourceMappingURL=Tooltip.stories.js.map