@yandex/ui/esm/Tooltip/__examples__/state.js

Yandex UI components

import { __read } from "tslib";
import React, { useRef, useState } from 'react';
import { Button } from '@yandex-lego/components/Button/desktop/bundle';
import { Tooltip } from '@yandex-lego/components/Tooltip/desktop/bundle';
export var State = function () {
    var _a = __read(useState(true), 2), visible1 = _a[0], setVisible1 = _a[1];
    var _b = __read(useState(true), 2), visible2 = _b[0], setVisible2 = _b[1];
    var _c = __read(useState(true), 2), visible3 = _c[0], setVisible3 = _c[1];
    var anchorRef1 = useRef(null);
    var anchorRef2 = useRef(null);
    var anchorRef3 = useRef(null);
    return (React.createElement("div", { style: { display: 'flex', height: 64 } },
        React.createElement("div", { style: { marginLeft: 32, marginRight: 32 } },
            React.createElement(Button, { innerRef: anchorRef1, size: "m", view: "default", onClick: function () { return setVisible1(!visible1); } }, "Warning")),
        React.createElement("div", { style: { marginLeft: 32, marginRight: 32 } },
            React.createElement(Button, { innerRef: anchorRef2, size: "m", view: "default", onClick: function () { return setVisible2(!visible2); } }, "Alert")),
        React.createElement("div", { style: { marginLeft: 32, marginRight: 32 } },
            React.createElement(Button, { innerRef: anchorRef3, size: "m", view: "default", onClick: function () { return setVisible3(!visible3); } }, "Success")),
        React.createElement(Tooltip, { hasTail: true, direction: "bottom", view: "default", size: "m", anchor: anchorRef1, visible: visible1, state: "warning" }, "Warning message"),
        React.createElement(Tooltip, { hasTail: true, direction: "bottom", view: "default", size: "m", anchor: anchorRef2, visible: visible2, state: "alert" }, "Alert message"),
        React.createElement(Tooltip, { hasTail: true, direction: "bottom", view: "default", size: "m", anchor: anchorRef3, visible: visible3, state: "success" }, "Success message")));
};