Tooltip 文字提示

简单的文字提示气泡框。

何时使用

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

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

API

参数	说明	类型	默认值
placement	气泡框位置，可选 `top/left/right/bottom`	string	top
title	提示文字	string/jsx	无

组件演示

var Tooltip = antd.Tooltip;

React.render(
  <Tooltip title="提示文字">
    <span>鼠标移上来就会出现提示</span>
  </Tooltip>
, document.getElementById('components-tooltip-demo-basic'));

基本

最简单的用法。

var Tooltip = antd.Tooltip;
var text = <span>提示文字</span>;

React.render(
  <div>
    <Tooltip placement="left" title={text}>
      <a href="#">左边左边</a>
    </Tooltip>
    <Tooltip placement="top" title={text}>
      <a href="#">上边上边</a>
    </Tooltip>
    <Tooltip placement="bottom" title={text}>
      <a href="#">下边下边</a>
    </Tooltip>
    <Tooltip placement="right" title={text}>
      <a href="#">右边右边</a>
    </Tooltip>
  </div>
, document.getElementById('components-tooltip-demo-placement'));

位置

位置有四个方向。