uxcore.js - React UI Component Set

组件演示

[{"title":"位置","id":"components-tooltip-demo-placement","tags":[],"filepath":"site/components/tooltip/demo/placement.md","directory":"components/tooltip/demo","filename":"placement","meta":{"title":"位置","description":"\n目前支持 12 个方向。\n","order":"1","filepath":"site/components/tooltip/demo/placement.md","filename":"placement","directory":"components/tooltip/demo","id":"components-tooltip-demo-placement","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var overlay = React.createElement(\n 'div',\n null,\n '\\u63D0\\u793A\\u6587\\u5B57'\n );\n return React.createElement(\n 'div',\n { className: 'demo' },\n React.createElement(\n 'div',\n { className: 'container' },\n React.createElement(\n 'div',\n { className: 'top' },\n React.createElement(\n _uxcore.Tooltip,\n { overlay: overlay, placement: 'topLeft', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { size: 'small', type: 'outline' },\n '\\u4E0A\\u5DE6'\n )\n ),\n React.createElement(\n _uxcore.Tooltip,\n { overlay: overlay, placement: 'top', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: 10 }, size: 'small', type: 'outline' },\n '\\u4E0A\\u8FB9'\n )\n ),\n React.createElement(\n _uxcore.Tooltip,\n { overlay: overlay, placement: 'topRight', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: 10 }, size: 'small', type: 'outline' },\n '\\u4E0A\\u53F3'\n )\n )\n ),\n React.createElement(\n 'div',\n { className: 'bottom' },\n React.createElement(\n _uxcore.Tooltip,\n { overlay: overlay, placement: 'bottomLeft', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { size: 'small', type: 'outline' },\n '\\u4E0B\\u5DE6'\n )\n ),\n React.createElement(\n _uxcore.Tooltip,\n { overlay: overlay, placement: 'bottom', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: 10 }, size: 'small', type: 'outline' },\n '\\u4E0B\\u8FB9'\n )\n ),\n React.createElement(\n _uxcore.Tooltip,\n { overlay: overlay, placement: 'bottomRight', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: 10 }, size: 'small', type: 'outline' },\n '\\u4E0B\\u53F3'\n )\n )\n ),\n React.createElement(\n 'div',\n { className: 'left' },\n React.createElement(\n _uxcore.Tooltip,\n { overlay: overlay, placement: 'leftTop', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { size: 'small', type: 'outline' },\n '\\u5DE6\\u4E0A'\n )\n ),\n React.createElement(\n _uxcore.Tooltip,\n { overlay: overlay, placement: 'left', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { style: { marginTop: 10 }, size: 'small', type: 'outline' },\n '\\u5DE6\\u8FB9'\n )\n ),\n React.createElement(\n _uxcore.Tooltip,\n { overlay: overlay, placement: 'leftBottom', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { style: { marginTop: 10 }, size: 'small', type: 'outline' },\n '\\u5DE6\\u4E0B'\n )\n )\n ),\n React.createElement(\n 'div',\n { className: 'right' },\n React.createElement(\n _uxcore.Tooltip,\n { overlay: overlay, placement: 'rightTop', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { size: 'small', type: 'outline' },\n '\\u53F3\\u4E0A'\n )\n ),\n React.createElement(\n _uxcore.Tooltip,\n { overlay: overlay, placement: 'right', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { style: { marginTop: 10 }, size: 'small', type: 'outline' },\n '\\u53F3\\u8FB9'\n )\n ),\n React.createElement(\n _uxcore.Tooltip,\n { overlay: overlay, placement: 'rightBottom', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { style: { marginTop: 10 }, size: 'small', type: 'outline' },\n '\\u53F3\\u4E0B'\n )\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-tooltip-demo-placement'));\n\n/* JS END CSS START */})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\n\nimport { Tooltip } from 'uxcore';\nimport { Button } from 'uxcore';\n\nclass Demo extends React.Component {\n render() {\n const overlay = <div>提示文字</div>;\n return (\n <div className=\"demo\">\n <div className=\"container\">\n <div className=\"top\">\n <Tooltip overlay={overlay} placement=\"topLeft\" trigger={['click']}>\n <Button size=\"small\" type=\"outline\">上左</Button>\n </Tooltip>\n <Tooltip overlay={overlay} placement=\"top\" trigger={['click']}>\n <Button style={{ marginLeft: 10 }} size=\"small\" type=\"outline\">上边</Button>\n </Tooltip>\n <Tooltip overlay={overlay} placement=\"topRight\" trigger={['click']}>\n <Button style={{ marginLeft: 10 }} size=\"small\" type=\"outline\">上右</Button>\n </Tooltip>\n </div>\n <div className=\"bottom\">\n <Tooltip overlay={overlay} placement=\"bottomLeft\" trigger={['click']}>\n <Button size=\"small\" type=\"outline\">下左</Button>\n </Tooltip>\n <Tooltip overlay={overlay} placement=\"bottom\" trigger={['click']}>\n <Button style={{ marginLeft: 10 }} size=\"small\" type=\"outline\">下边</Button>\n </Tooltip>\n <Tooltip overlay={overlay} placement=\"bottomRight\" trigger={['click']}>\n <Button style={{ marginLeft: 10 }} size=\"small\" type=\"outline\">下右</Button>\n </Tooltip>\n </div>\n <div className=\"left\">\n <Tooltip overlay={overlay} placement=\"leftTop\" trigger={['click']}>\n <Button size=\"small\" type=\"outline\">左上</Button>\n </Tooltip>\n <Tooltip overlay={overlay} placement=\"left\" trigger={['click']}>\n <Button style={{ marginTop: 10 }} size=\"small\" type=\"outline\">左边</Button>\n </Tooltip>\n <Tooltip overlay={overlay} placement=\"leftBottom\" trigger={['click']}>\n <Button style={{ marginTop: 10 }} size=\"small\" type=\"outline\">左下</Button>\n </Tooltip>\n </div>\n <div className=\"right\">\n <Tooltip overlay={overlay} placement=\"rightTop\" trigger={['click']}>\n <Button size=\"small\" type=\"outline\">右上</Button>\n </Tooltip>\n <Tooltip overlay={overlay} placement=\"right\" trigger={['click']}>\n <Button style={{ marginTop: 10 }} size=\"small\" type=\"outline\">右边</Button>\n </Tooltip>\n <Tooltip overlay={overlay} placement=\"rightBottom\" trigger={['click']}>\n <Button style={{ marginTop: 10 }} size=\"small\" type=\"outline\">右下</Button>\n </Tooltip>\n </div>\n </div>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-tooltip-demo-placement'));\n\n/* JS END CSS START */</code></pre></div><style type=\"text/css\">.demo {\n padding: 0;\n}\n.demo .container {\n height: 170px;\n width: 320px;\n position: relative;\n}\n.demo .container .top {\n position: absolute;\n top: 0;\n left: 80px;\n}\n.demo .container .bottom {\n position: absolute;\n bottom: 0;\n left: 80px;\n}\n.demo .container .left,\n.demo .container .right {\n width: 58px;\n position: absolute;\n}\n.demo .container .left {\n left: 0;\n text-align: left;\n top: 35px;\n}\n.demo .container .right {\n right: 0;\n text-align: right;\n top: 35px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.demo {\n padding: 0;\n}\n.demo .container {\n height: 170px;\n width: 320px;\n position: relative;\n}\n.demo .container .top {\n position: absolute;\n top: 0;\n left: 80px;\n}\n.demo .container .bottom {\n position: absolute;\n bottom: 0;\n left: 80px;\n}\n.demo .container .left,\n.demo .container .right {\n width: 58px;\n position: absolute;\n}\n.demo .container .left {\n left: 0;\n text-align: left;\n top: 35px;\n}\n.demo .container .right {\n right: 0;\n text-align: right;\n top: 35px;\n}</code></pre></div>"},"status":"public","toc":""},{"title":"黑色","id":"components-tooltip-demo-black","tags":[],"filepath":"site/components/tooltip/demo/black.md","directory":"components/tooltip/demo","filename":"black","meta":{"title":"黑色","description":"\n黑色版本\n","order":"2","filepath":"site/components/tooltip/demo/black.md","filename":"black","directory":"components/tooltip/demo","id":"components-tooltip-demo-black","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var overlay = React.createElement(\n 'div',\n null,\n '\\u63D0\\u793A\\u6587\\u5B57'\n );\n return React.createElement(\n 'div',\n { className: 'demo' },\n React.createElement(\n 'div',\n { className: 'container' },\n React.createElement(\n 'div',\n { className: 'top' },\n React.createElement(\n _uxcore.Tooltip,\n { overlayClassName: 'kuma-tooltip-dark', overlay: overlay, placement: 'topLeft', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { size: 'small', type: 'outline' },\n '\\u4E0A\\u5DE6'\n )\n ),\n React.createElement(\n _uxcore.Tooltip,\n { overlayClassName: 'kuma-tooltip-dark', overlay: overlay, placement: 'top', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: 10 }, size: 'small', type: 'outline' },\n '\\u4E0A\\u8FB9'\n )\n ),\n React.createElement(\n _uxcore.Tooltip,\n { overlayClassName: 'kuma-tooltip-dark', overlay: overlay, placement: 'topRight', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: 10 }, size: 'small', type: 'outline' },\n '\\u4E0A\\u53F3'\n )\n )\n ),\n React.createElement(\n 'div',\n { className: 'bottom' },\n React.createElement(\n _uxcore.Tooltip,\n { overlayClassName: 'kuma-tooltip-dark', overlay: overlay, placement: 'bottomLeft', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { size: 'small', type: 'outline' },\n '\\u4E0B\\u5DE6'\n )\n ),\n React.createElement(\n _uxcore.Tooltip,\n { overlayClassName: 'kuma-tooltip-dark', overlay: overlay, placement: 'bottom', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: 10 }, size: 'small', type: 'outline' },\n '\\u4E0B\\u8FB9'\n )\n ),\n React.createElement(\n _uxcore.Tooltip,\n { overlayClassName: 'kuma-tooltip-dark', overlay: overlay, placement: 'bottomRight', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: 10 }, size: 'small', type: 'outline' },\n '\\u4E0B\\u53F3'\n )\n )\n ),\n React.createElement(\n 'div',\n { className: 'left' },\n React.createElement(\n _uxcore.Tooltip,\n { overlayClassName: 'kuma-tooltip-dark', overlay: overlay, placement: 'leftTop', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { size: 'small', type: 'outline' },\n '\\u5DE6\\u4E0A'\n )\n ),\n React.createElement(\n _uxcore.Tooltip,\n { overlayClassName: 'kuma-tooltip-dark', overlay: overlay, placement: 'left', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { style: { marginTop: 10 }, size: 'small', type: 'outline' },\n '\\u5DE6\\u8FB9'\n )\n ),\n React.createElement(\n _uxcore.Tooltip,\n { overlayClassName: 'kuma-tooltip-dark', overlay: overlay, placement: 'leftBottom', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { style: { marginTop: 10 }, size: 'small', type: 'outline' },\n '\\u5DE6\\u4E0B'\n )\n )\n ),\n React.createElement(\n 'div',\n { className: 'right' },\n React.createElement(\n _uxcore.Tooltip,\n { overlayClassName: 'kuma-tooltip-dark', overlay: overlay, placement: 'rightTop', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { size: 'small', type: 'outline' },\n '\\u53F3\\u4E0A'\n )\n ),\n React.createElement(\n _uxcore.Tooltip,\n { overlayClassName: 'kuma-tooltip-dark', overlay: overlay, placement: 'right', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { style: { marginTop: 10 }, size: 'small', type: 'outline' },\n '\\u53F3\\u8FB9'\n )\n ),\n React.createElement(\n _uxcore.Tooltip,\n { overlayClassName: 'kuma-tooltip-dark', overlay: overlay, placement: 'rightBottom', trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n { style: { marginTop: 10 }, size: 'small', type: 'outline' },\n '\\u53F3\\u4E0B'\n )\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-tooltip-demo-black'));\n\n/* JS END CSS START */})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\n\nimport { Tooltip } from 'uxcore';\nimport { Button } from 'uxcore';\n\nclass Demo extends React.Component {\n render() {\n const overlay = <div>提示文字</div>;\n return (\n <div className=\"demo\">\n <div className=\"container\">\n <div className=\"top\">\n <Tooltip overlayClassName=\"kuma-tooltip-dark\" overlay={overlay} placement=\"topLeft\" trigger={['click']}>\n <Button size=\"small\" type=\"outline\">上左</Button>\n </Tooltip>\n <Tooltip overlayClassName=\"kuma-tooltip-dark\" overlay={overlay} placement=\"top\" trigger={['click']}>\n <Button style={{ marginLeft: 10 }} size=\"small\" type=\"outline\">上边</Button>\n </Tooltip>\n <Tooltip overlayClassName=\"kuma-tooltip-dark\" overlay={overlay} placement=\"topRight\" trigger={['click']}>\n <Button style={{ marginLeft: 10 }} size=\"small\" type=\"outline\">上右</Button>\n </Tooltip>\n </div>\n <div className=\"bottom\">\n <Tooltip overlayClassName=\"kuma-tooltip-dark\" overlay={overlay} placement=\"bottomLeft\" trigger={['click']}>\n <Button size=\"small\" type=\"outline\">下左</Button>\n </Tooltip>\n <Tooltip overlayClassName=\"kuma-tooltip-dark\" overlay={overlay} placement=\"bottom\" trigger={['click']}>\n <Button style={{ marginLeft: 10 }} size=\"small\" type=\"outline\">下边</Button>\n </Tooltip>\n <Tooltip overlayClassName=\"kuma-tooltip-dark\" overlay={overlay} placement=\"bottomRight\" trigger={['click']}>\n <Button style={{ marginLeft: 10 }} size=\"small\" type=\"outline\">下右</Button>\n </Tooltip>\n </div>\n <div className=\"left\">\n <Tooltip overlayClassName=\"kuma-tooltip-dark\" overlay={overlay} placement=\"leftTop\" trigger={['click']}>\n <Button size=\"small\" type=\"outline\">左上</Button>\n </Tooltip>\n <Tooltip overlayClassName=\"kuma-tooltip-dark\" overlay={overlay} placement=\"left\" trigger={['click']}>\n <Button style={{ marginTop: 10 }} size=\"small\" type=\"outline\">左边</Button>\n </Tooltip>\n <Tooltip overlayClassName=\"kuma-tooltip-dark\" overlay={overlay} placement=\"leftBottom\" trigger={['click']}>\n <Button style={{ marginTop: 10 }} size=\"small\" type=\"outline\">左下</Button>\n </Tooltip>\n </div>\n <div className=\"right\">\n <Tooltip overlayClassName=\"kuma-tooltip-dark\" overlay={overlay} placement=\"rightTop\" trigger={['click']}>\n <Button size=\"small\" type=\"outline\">右上</Button>\n </Tooltip>\n <Tooltip overlayClassName=\"kuma-tooltip-dark\" overlay={overlay} placement=\"right\" trigger={['click']}>\n <Button style={{ marginTop: 10 }} size=\"small\" type=\"outline\">右边</Button>\n </Tooltip>\n <Tooltip overlayClassName=\"kuma-tooltip-dark\" overlay={overlay} placement=\"rightBottom\" trigger={['click']}>\n <Button style={{ marginTop: 10 }} size=\"small\" type=\"outline\">右下</Button>\n </Tooltip>\n </div>\n </div>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-tooltip-demo-black'));\n\n/* JS END CSS START */</code></pre></div><style type=\"text/css\">.demo {\n padding: 0;\n}\n.demo .container {\n height: 170px;\n width: 320px;\n position: relative;\n}\n.demo .container .top {\n position: absolute;\n top: 0;\n left: 80px;\n}\n.demo .container .bottom {\n position: absolute;\n bottom: 0;\n left: 80px;\n}\n.demo .container .left,\n.demo .container .right {\n width: 58px;\n position: absolute;\n}\n.demo .container .left {\n left: 0;\n text-align: left;\n top: 35px;\n}\n.demo .container .right {\n right: 0;\n text-align: right;\n top: 35px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.demo {\n padding: 0;\n}\n.demo .container {\n height: 170px;\n width: 320px;\n position: relative;\n}\n.demo .container .top {\n position: absolute;\n top: 0;\n left: 80px;\n}\n.demo .container .bottom {\n position: absolute;\n bottom: 0;\n left: 80px;\n}\n.demo .container .left,\n.demo .container .right {\n width: 58px;\n position: absolute;\n}\n.demo .container .left {\n left: 0;\n text-align: left;\n top: 35px;\n}\n.demo .container .right {\n right: 0;\n text-align: right;\n top: 35px;\n}</code></pre></div>"},"status":"public","toc":""}]

位置

目前支持 12 个方向。



import { Tooltip } from 'uxcore';
import { Button } from 'uxcore';

class Demo extends React.Component {
  render() {
    const overlay = <div>提示文字</div>;
    return (
      <div className="demo">
        <div className="container">
          <div className="top">
            <Tooltip overlay={overlay} placement="topLeft" trigger={['click']}>
              <Button size="small" type="outline">上左</Button>
            </Tooltip>
            <Tooltip overlay={overlay} placement="top" trigger={['click']}>
              <Button style={{ marginLeft: 10 }} size="small" type="outline">上边</Button>
            </Tooltip>
            <Tooltip overlay={overlay} placement="topRight" trigger={['click']}>
              <Button style={{ marginLeft: 10 }} size="small" type="outline">上右</Button>
            </Tooltip>
          </div>
          <div className="bottom">
            <Tooltip overlay={overlay} placement="bottomLeft" trigger={['click']}>
              <Button size="small" type="outline">下左</Button>
            </Tooltip>
            <Tooltip overlay={overlay} placement="bottom" trigger={['click']}>
              <Button style={{ marginLeft: 10 }} size="small" type="outline">下边</Button>
            </Tooltip>
            <Tooltip overlay={overlay} placement="bottomRight" trigger={['click']}>
              <Button style={{ marginLeft: 10 }} size="small" type="outline">下右</Button>
            </Tooltip>
          </div>
          <div className="left">
            <Tooltip overlay={overlay} placement="leftTop" trigger={['click']}>
              <Button size="small" type="outline">左上</Button>
            </Tooltip>
            <Tooltip overlay={overlay} placement="left" trigger={['click']}>
              <Button style={{ marginTop: 10 }} size="small" type="outline">左边</Button>
            </Tooltip>
            <Tooltip overlay={overlay} placement="leftBottom" trigger={['click']}>
              <Button style={{ marginTop: 10 }} size="small" type="outline">左下</Button>
            </Tooltip>
          </div>
          <div className="right">
            <Tooltip overlay={overlay} placement="rightTop" trigger={['click']}>
              <Button size="small" type="outline">右上</Button>
            </Tooltip>
            <Tooltip overlay={overlay} placement="right" trigger={['click']}>
              <Button style={{ marginTop: 10 }} size="small" type="outline">右边</Button>
            </Tooltip>
            <Tooltip overlay={overlay} placement="rightBottom" trigger={['click']}>
              <Button style={{ marginTop: 10 }} size="small" type="outline">右下</Button>
            </Tooltip>
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-tooltip-demo-placement'));

/* JS END CSS START */

.demo {
  padding: 0;
}
.demo .container {
  height: 170px;
  width: 320px;
  position: relative;
}
.demo .container .top {
  position: absolute;
  top: 0;
  left: 80px;
}
.demo .container .bottom {
  position: absolute;
  bottom: 0;
  left: 80px;
}
.demo .container .left,
.demo .container .right {
  width: 58px;
  position: absolute;
}
.demo .container .left {
  left: 0;
  text-align: left;
  top: 35px;
}
.demo .container .right {
  right: 0;
  text-align: right;
  top: 35px;
}

黑色

黑色版本



import { Tooltip } from 'uxcore';
import { Button } from 'uxcore';

class Demo extends React.Component {
  render() {
    const overlay = <div>提示文字</div>;
    return (
      <div className="demo">
        <div className="container">
          <div className="top">
            <Tooltip overlayClassName="kuma-tooltip-dark" overlay={overlay} placement="topLeft" trigger={['click']}>
              <Button size="small" type="outline">上左</Button>
            </Tooltip>
            <Tooltip overlayClassName="kuma-tooltip-dark" overlay={overlay} placement="top" trigger={['click']}>
              <Button style={{ marginLeft: 10 }} size="small" type="outline">上边</Button>
            </Tooltip>
            <Tooltip overlayClassName="kuma-tooltip-dark" overlay={overlay} placement="topRight" trigger={['click']}>
              <Button style={{ marginLeft: 10 }} size="small" type="outline">上右</Button>
            </Tooltip>
          </div>
          <div className="bottom">
            <Tooltip overlayClassName="kuma-tooltip-dark" overlay={overlay} placement="bottomLeft" trigger={['click']}>
              <Button size="small" type="outline">下左</Button>
            </Tooltip>
            <Tooltip overlayClassName="kuma-tooltip-dark" overlay={overlay} placement="bottom" trigger={['click']}>
              <Button style={{ marginLeft: 10 }} size="small" type="outline">下边</Button>
            </Tooltip>
            <Tooltip overlayClassName="kuma-tooltip-dark" overlay={overlay} placement="bottomRight" trigger={['click']}>
              <Button style={{ marginLeft: 10 }} size="small" type="outline">下右</Button>
            </Tooltip>
          </div>
          <div className="left">
            <Tooltip overlayClassName="kuma-tooltip-dark" overlay={overlay} placement="leftTop" trigger={['click']}>
              <Button size="small" type="outline">左上</Button>
            </Tooltip>
            <Tooltip overlayClassName="kuma-tooltip-dark" overlay={overlay} placement="left" trigger={['click']}>
              <Button style={{ marginTop: 10 }} size="small" type="outline">左边</Button>
            </Tooltip>
            <Tooltip overlayClassName="kuma-tooltip-dark" overlay={overlay} placement="leftBottom" trigger={['click']}>
              <Button style={{ marginTop: 10 }} size="small" type="outline">左下</Button>
            </Tooltip>
          </div>
          <div className="right">
            <Tooltip overlayClassName="kuma-tooltip-dark" overlay={overlay} placement="rightTop" trigger={['click']}>
              <Button size="small" type="outline">右上</Button>
            </Tooltip>
            <Tooltip overlayClassName="kuma-tooltip-dark" overlay={overlay} placement="right" trigger={['click']}>
              <Button style={{ marginTop: 10 }} size="small" type="outline">右边</Button>
            </Tooltip>
            <Tooltip overlayClassName="kuma-tooltip-dark" overlay={overlay} placement="rightBottom" trigger={['click']}>
              <Button style={{ marginTop: 10 }} size="small" type="outline">右下</Button>
            </Tooltip>
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-tooltip-demo-black'));

/* JS END CSS START */

.demo {
  padding: 0;
}
.demo .container {
  height: 170px;
  width: 320px;
  position: relative;
}
.demo .container .top {
  position: absolute;
  top: 0;
  left: 80px;
}
.demo .container .bottom {
  position: absolute;
  bottom: 0;
  left: 80px;
}
.demo .container .left,
.demo .container .right {
  width: 58px;
  position: absolute;
}
.demo .container .left {
  left: 0;
  text-align: left;
  top: 35px;
}
.demo .container .right {
  right: 0;
  text-align: right;
  top: 35px;
}

简单的文字提示气泡框。

何时使用

鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。

可用来代替系统默认的 title 提示，提供一个按钮/文字/操作的文案解释。

API

参数	类型	默认值	说明
overlayClassName	string	uxcore	additional className added to popup overlay
trigger	string[]	['hover']	which actions cause tooltip shown. enum of 'hover','click','focus'
mouseEnterDelay	number	0	delay time to show when mouse enter.unit: s.
mouseLeaveDelay	number	0.1	delay time to hide when mouse leave.unit: s.
overlayStyle	Object		additional style of overlay node
wrapStyle	Object		additional style of wrap node
prefixCls	String	kuma-tooltip	prefix class name
onVisibleChange	Function		call when visible is changed
visible	boolean		whether tooltip is visible
defaultVisible	boolean		whether tooltip is visible initially
placement	String or Object		one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] or alignConfig of dom-align
align	Object: alignConfig of dom-align		only valid when placement's type is String. value will be merged into placement's align config. note: can only accept offset and targetOffset
overlay	React.Element		popup content
getTooltipContainer	function		function returning html node which will act as tooltip contaier