sccoreui/dist/pages/tooltip/tooltip.js

ui-sccore

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TooltipComponent = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const tooltip_1 = require("primereact/tooltip");
const TooltipComponent = () => {
    const content = () => {
        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "m-0 flex flex-column gap-1 px-0 shadow-none" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "p-0 m-0 font-semibold shadow-none" }, { children: "This is a Tooltip" })), (0, jsx_runtime_1.jsxs)("p", Object.assign({ className: "p-0 m-0 font-medium shadow-none" }, { children: ["Tooltips are used to describe or identify an ", (0, jsx_runtime_1.jsx)("br", {}), " element. In most scenarios, tooltips help the user ", (0, jsx_runtime_1.jsx)("br", {}), " understand meaning, function or alt-text."] }))] })));
    };
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Tooltips" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-5" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-top-dark", position: "top", content: "No", className: "mb-1" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-top-dark pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Top" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-bottom-dark", position: "bottom", content: "T00dfsgdfgdfgfdg", className: "mt-1" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-bottom-dark pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Bottom" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-left-dark", position: "left", content: "This is a tooltip", className: "mr-1" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-left-dark pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Left" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-right-dark", position: "right", hideDelay: 100000, content: "This is a tooltip", className: "ml-1" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-right-dark pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Right" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-top-light", position: "top", className: "p-light-tooltip", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-top-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Top" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-bottom-light", position: "bottom", className: "p-light-tooltip", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-bottom-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Bottom" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-left-light", position: "left", className: "p-light-tooltip", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-left-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Left" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-right-light", position: "right", className: "p-light-tooltip", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-right-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Right" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-top", position: "top" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-top pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Top" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-bottom", position: "bottom" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-bottom pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Bottom" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-left", position: "left" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-left pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Left" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-right", position: "right" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-right pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Right" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-top-light", position: "top", className: "p-light-tooltip" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-top-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Top" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-bottom-light", position: "bottom", className: "p-light-tooltip" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-bottom-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Bottom" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-left-light", position: "left", className: "p-light-tooltip" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-left-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Left" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-right-light", position: "right", className: "p-light-tooltip" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-right-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Right" })] }))] }))] }))] }));
};
exports.TooltipComponent = TooltipComponent;
exports.default = exports.TooltipComponent;