冒泡提示框

当你想通过用户对一个组件的某些行为，触发一个提示信息时，可以用hana提供的这个组件。

基础

/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 17/1/4
 */
import React, {Component} from 'react';
import {Tooltip, Switch, Button} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Base
 *
 * This component mainly works with state `show` and property `children`,
 * state `show` is used for controlling whether the tooltip will open or close,
 * and property `children` is the component using tooltip.
 *
 * A property `show` is provided for controlling the tooltip will be shown or not,
 * if the `show` is undefined, this component will be controlled by an inner state.
 *
 * If you want to disable this component, please using `disabled`.
 *
 * @cn
 * 基础
 *
 * 此组件的运作主要依赖于`show`状态和`children`属性，前者用于控制弹出框的显示，后者则是弹出框凭依的子级组件。
 *
 * 当`show`属性被定义时，弹出框将会强制打开或关闭，否则将会自行维护内部的`show`状态。
 *
 * 如果你想禁用此组件，可以使用`disabled`样式哦。
 */
export default class ExampleBase extends Component {
  state = {
    autoValue: 'false',
    show: false
  };

  render() {
    const {
      autoValue,
      show
    } = this.state;

    return (
      <div>
        <ExampleBlock
          en={(
            <p>Auto mode, property `show` is `{autoValue}`</p>
          )}
          cn={(
            <p>自动模式，属性`show`为`{autoValue}`</p>
          )}
        >
          <Tooltip
            position={'right'}
            content={<p>You has hovered me www</p>}
            onChange={state => this.setState({autoValue: `${state}`})}
          >
            <Button>Hover me!</Button>
          </Tooltip>
        </ExampleBlock>

        <ExampleBlock
          en={(
            <p>Controlled mode</p>
          )}
          cn={(
            <p>受控模式</p>
          )}
        >
          <Tooltip
            show={show}
            content={<p>You has controlled the switch !</p>}
            onChange={state => this.setState({controlledValue: state})}
          >
            <Button>Control switch !</Button>
          </Tooltip>
          <Switch
            checked={show}
            onChange={checked => this.setState({show: checked})}
          />
        </ExampleBlock>

        <ExampleBlock
          en={(
            <p>Disabled</p>
          )}
          cn={(
            <p>禁用模式</p>
          )}
        >
          <Tooltip
            disabled
          >
            <Button>Heng, you can't control me!</Button>
          </Tooltip>
        </ExampleBlock>
      </div>
    );
  }
}

此组件的运作主要依赖于show状态和children属性，前者用于控制弹出框的显示，后者则是弹出框凭依的子级组件。

当show属性被定义时，弹出框将会强制打开或关闭，否则将会自行维护内部的show状态。

如果你想禁用此组件，可以使用disabled样式哦。

自动模式，属性`show`为`false`

受控模式

禁用模式

显示类型

/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 2017/3/6
 */
import React from 'react';
import {Tooltip, Button} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * View
 * hana use `view` property to define the view type of popover.
 *
 * @cn
 * 显示类型
 *
 * 提示框有两种显示类型，hana用`view`属性来定义她。
 *
 */
export default () => (
  <div>
    <ExampleBlock
      en={(
        <p>Rich text with view `fill`</p>
      )}
      cn={(
        <p>富文本，显示类型为`fill`</p>
      )}
    >
      <Tooltip
        content={(
          <div>
            <p>Hey, give me your photo with dressing lolita !</p>
            <img src="http://oekm6wrcq.bkt.clouddn.com/hana-ui/tooltip.png" alt="rich text" />
          </div>
        )}
      >
        <Button>Hover me!</Button>
      </Tooltip>
    </ExampleBlock>

    <ExampleBlock
      en={(
        <p>Rich text with view `border`</p>
      )}
      cn={(
        <p>富文本，显示类型为`border`</p>
      )}
    >
      <Tooltip
        view={'border'}
        content={(
          <div>
            <p>Hey, give me your photo with dressing lolita !</p>
            <img src="http://oekm6wrcq.bkt.clouddn.com/hana-ui/tooltip.png" alt="rich text" />
          </div>
        )}
      >
        <Button>Hover me!</Button>
      </Tooltip>
    </ExampleBlock>
  </div>
);

提示框有两种显示类型，hana用view属性来定义她。

富文本，显示类型为`fill`

富文本，显示类型为`border`

位置

/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 17/1/4
 */
import React from 'react';
import {Tooltip, Button} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Positions
 *
 * hana provides property `position` to decide where the Tooltip will be shown.
 *
 * @cn
 * 位置
 *
 * hana提供了`position`属性，用于快捷地确定其显示时的位置。
 */
export default () => (
  <div>
    <ExampleBlock>
      <div>
        <div
          style={{
            marginLeft: 140
          }}
        >
          <Tooltip position="top" content={<p>Top</p>}>
            <Button>Top</Button>
          </Tooltip>
        </div>

        <div
          style={{
            marginTop: 24,
            marginBottom: 24
          }}
        >
          <div
            style={{
              display: 'inline-block',
              marginLeft: 50
            }}
          >
            <Tooltip position="left" content={<p>Left</p>}>
              <Button>Left</Button>
            </Tooltip>
          </div>

          <div
            style={{
              display: 'inline-block',
              marginLeft: 110
            }}
          >
            <Tooltip position="right" content={<p>Right</p>}>
              <Button>Right</Button>
            </Tooltip>
          </div>
        </div>

        <div
          style={{
            marginLeft: 130
          }}
        >
          <Tooltip position="bottom" content={<p>Bottom</p>}>
            <Button>Bottom</Button>
          </Tooltip>
        </div>
      </div>
    </ExampleBlock>
  </div>
);

hana提供了position属性，用于快捷地确定其显示时的位置。

触发方式

/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 17/1/4
 */
import React from 'react';
import {Tooltip, Text, Button} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Triggers
 *
 * Tooltip could be controlled by many triggers,
 * you can use the `trigger` to control tooltip with different event.
 *
 * @cn
 * 触发方式
 *
 * 触发方式也是可选的属性之一。
 * 通过属性`trigger`，你可以选择默认使用怎样的事件来触发弹提示框的开闭。
 */

export default () => (
  <div>
    <ExampleBlock
      en={(
        <p>Hover</p>
      )}
      cn={(
        <p>悬停</p>
      )}
    >
      <Tooltip
        trigger={'hover'}
        content={<p>Hover</p>}
      >
        <Button>Hover</Button>
      </Tooltip>
    </ExampleBlock>

    <ExampleBlock
      en={(
        <p>Focus</p>
      )}
      cn={(
        <p>聚焦</p>
      )}
    >
      <Tooltip
        trigger={'focus'}
        content={<p>Focus</p>}
      >
        <Text
          auto
          defaultValue={'Focus'}
        />
      </Tooltip>
    </ExampleBlock>

    <ExampleBlock
      en={(
        <p>Click</p>
      )}
      cn={(
        <p>点击</p>
      )}
    >
      <Tooltip
        trigger={'click'}
        content={<p>Click</p>}
      >
        <Button>Click</Button>
      </Tooltip>
    </ExampleBlock>
  </div>
);

触发方式也是可选的属性之一。通过属性trigger，你可以选择默认使用怎样的事件来触发弹提示框的开闭。

悬停

聚焦

点击

样式

/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 17/1/5
 */
import React from 'react';
import {Tooltip, Button} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Style
 *
 * You can use the property 'style' and `containerStyle` to custom style,
 * otherwise, hana allow you to define the theme color with property `color` quickly.
 *
 * @cn
 * 样式
 *
 * 你可以通过`style`和`containerStyle`来自定义样式，
 * 除此之外，hana还提供了一个`color`属性来快速改变提示框的主题颜色。
 */

export default () => (
  <div>
    <ExampleBlock
      en={(
        <p>property: color='black'</p>
      )}
      cn={(
        <p>property: color='black'</p>
      )}
    >
      <Tooltip
        content={(
          <div>
            <p>I dressed it !</p>
            <img src="http://oekm6wrcq.bkt.clouddn.com/hana-ui/tooltip.png" alt="rich text" />
          </div>
        )}
        color={'black'}
      >
        <Button>Dress</Button>
      </Tooltip>
    </ExampleBlock>

    <ExampleBlock
      en={(
        <p>property: style='width: 200'</p>
      )}
      cn={(
        <p>property: style='width: 200'</p>
      )}
    >
      <Tooltip
        position={'bottom'}
        content={<p>Bottom</p>}
        style={{
          width: 200
        }}
      >
        <Button>Bottom</Button>
      </Tooltip>
    </ExampleBlock>

    <ExampleBlock
      en={(
        <p>property: containerStyle="position: 'absolute'; right: 0"</p>
      )}
      cn={(
        <p>property: containerStyle="position: 'absolute'; right: 0"</p>
      )}
    >
      <Tooltip
        position={'bottom'}
        content={<p>Bottom</p>}
        containerStyle={{
          position: 'absolute',
          right: 48
        }}
      >
        <Button>Bottom</Button>
      </Tooltip>
    </ExampleBlock>
  </div>
);

你可以通过style和containerStyle来自定义样式，除此之外，hana还提供了一个color属性来快速改变提示框的主题颜色。

property: color='black'

property: style='width: 200'

property: containerStyle="position: 'absolute'; right: 0"

属性说明

属性名	类型	默认值	说明
view	enum: 'border' 'fill'	'fill'	提示框的显示类型。
content	node	null	提示框的内容。
position	enum: 'top' 'bottom' 'left' 'right'	'bottom'	默认相对于children显示的位置。
show	bool		用于自行控制提示框的显示与关闭。
disabled	bool		禁用提示框。
onChange	function	() => {}	当提示框被打开或者关闭时，将会触发这个回调。 show => void
trigger	enum: 'hover' 'focus' 'click'	'hover'	触发打开提示框这个行为的方式。
color	string		提示框的主题颜色。
containerStyle	object	{}	根元素的样式。
style	object	{}	提示框的样式。
className	string		提示框根元素的class。
children	node	null	想要绑定提示框的组件。

未在文档中说明的属性将会被自动加到根元素或form元素上。