import Balloon from '..';
import Button from '../../button';
import React from 'react';
import ReactDOM from 'react-dom';
const Tooltip = Balloon.Tooltip;
const top = React.createElement(Button, { style: { margin: '5px' }, id: "top", className: "btrigger" }, "top");
const right = React.createElement(Button, { style: { margin: '5px' }, id: "right", className: "btrigger" }, "right");
const bottom = React.createElement(Button, { style: { margin: '5px' }, id: "bottom", className: "btrigger" }, "bottom");
const left = React.createElement(Button, { style: { margin: '5px' }, id: "left", className: "btrigger" }, "left");
const topLeft = React.createElement(Button, { style: { margin: '5px' }, id: "topLeft", className: "btrigger" }, "top left");
const topRight = React.createElement(Button, { style: { margin: '5px' }, id: "topRight", className: "btrigger" }, "top right");
const rightTop = React.createElement(Button, { style: { margin: '5px' }, id: "rightTop", className: "btrigger" }, "right top");
const rightBottom = React.createElement(Button, { style: { margin: '5px' }, id: "rightBottom", className: "btrigger" }, "right bottom");
const bottomLeft = React.createElement(Button, { style: { margin: '5px' }, id: "bottomLeft", className: "btrigger" }, "bottom left");
const bottomRight = React.createElement(Button, { style: { margin: '5px' }, id: "bottomRight", className: "btrigger" }, "bottom right");
const leftTop = React.createElement(Button, { style: { margin: '5px' }, id: "leftTop", className: "btrigger" }, "left top");
const leftBottom = React.createElement(Button, { style: { margin: '5px' }, id: "leftBottom", className: "btrigger" }, "left bottom");
const App = () => (React.createElement("div", { style: { paddingLeft: 220 } },
    React.createElement("div", { style: { marginLeft: 75 } },
        React.createElement(Tooltip, { trigger: topLeft, align: "tl" }, "text text"),
        React.createElement(Tooltip, { trigger: top, align: "t" }, "text text"),
        React.createElement(Tooltip, { trigger: topRight, align: "tr" }, "text text")),
    React.createElement("div", { style: { width: 80, float: 'left' } },
        React.createElement(Tooltip, { trigger: leftTop, align: "lt" }, "text text"),
        React.createElement(Tooltip, { trigger: left, align: "l" }, "text text"),
        React.createElement(Tooltip, { trigger: leftBottom, align: "lb" }, "text text")),
    React.createElement("div", { style: { width: 80, marginLeft: 290 } },
        React.createElement(Tooltip, { trigger: rightTop, align: "rt" }, "text text"),
        React.createElement(Tooltip, { trigger: right, align: "r" }, "text text"),
        React.createElement(Tooltip, { trigger: rightBottom, align: "rb" }, "text text")),
    React.createElement("div", { style: { marginLeft: 80, clear: 'both' } },
        React.createElement(Tooltip, { trigger: bottomLeft, align: "bl" }, "text text"),
        React.createElement(Tooltip, { trigger: bottom, align: "b" }, "text text"),
        React.createElement(Tooltip, { trigger: bottomRight, align: "br" }, "text text"))));
ReactDOM.render(React.createElement(App, null), document.getElementById('balloon-demo-1'));
