Element-React Tooltip 文字提示

常用于展示鼠標(biāo) hover 時(shí)的提示信息。

基礎(chǔ)用法

在這里我們提供 9 種不同方向的展示方式，可以通過(guò)以下完整示例來(lái)理解，選擇你要的效果。

使用content屬性來(lái)決定hover時(shí)的提示信息。由placement屬性決定展示效果：placement屬性值為：方向-對(duì)齊位置；四個(gè)方向：top、left、right、bottom；三種對(duì)齊位置：start, end，默認(rèn)為空。如placement="left-end"，則提示信息出現(xiàn)在目標(biāo)元素的左側(cè)，且提示信息的底部與目標(biāo)元素的底部對(duì)齊。

render() {
  return (
    <div className="box">
      <div className="top">
        <Tooltip className="item" effect="dark" content="Top Left 提示文字" placement="top-start">
          <Button>上左</Button>
        </Tooltip>
        <Tooltip className="item" effect="dark" content="Top Center 提示文字" placement="top">
          <Button>上邊</Button>
        </Tooltip>
        <Tooltip className="item" effect="dark" content="Top Right 提示文字" placement="top-end">
          <Button>上右</Button>
        </Tooltip>
      </div>
      <div className="left">
        <Tooltip className="item" effect="dark" content="Left Top 提示文字" placement="left-start">
          <Button>左上</Button>
        </Tooltip>
        <Tooltip className="item" effect="dark" content="Left Center 提示文字" placement="left">
          <Button>左邊</Button>
        </Tooltip>
        <Tooltip className="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
          <Button>左下</Button>
        </Tooltip>
      </div>


      <div className="right">
        <Tooltip className="item" effect="dark" content="Right Top 提示文字" placement="right-start">
          <Button>右上</Button>
        </Tooltip>
        <Tooltip className="item" effect="dark" content="Right Center 提示文字" placement="right">
          <Button>右邊</Button>
        </Tooltip>
        <Tooltip className="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
          <Button>右下</Button>
        </Tooltip>
      </div>
      <div className="bottom">
        <Tooltip className="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
          <Button>下左</Button>
        </Tooltip>
        <Tooltip className="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
          <Button>下邊</Button>
        </Tooltip>
        <Tooltip className="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
          <Button>下右</Button>
        </Tooltip>
      </div>
    </div>
  )
}

主題

Tooltip 組件提供了兩個(gè)不同的主題：dark和light。

通過(guò)設(shè)置effect屬性來(lái)改變主題，默認(rèn)為dark。

render() {
  return (
    <div>
      <Tooltip content="Top center" placement="top">
        <Button>Dark</Button>
      </Tooltip>
      <Tooltip content="Bottom center" placement="bottom" effect="light">
        <Button>Light</Button>
      </Tooltip>
    </div>
  )
}

更多 Content

展示多行文本或者是設(shè)置文本內(nèi)容的格式

content屬性也可以是ReactElement。

render() {
  return (
    <Tooltip
      placement="top"
      content={
        <div>多行信息<br/>第二行信息</div>
      }
    >
      <Button>Top center</Button>
    </Tooltip>
  )
}

高級(jí)擴(kuò)展

除了這些基本設(shè)置外，還有一些屬性可以讓使用者更好的定制自己的效果：transition屬性可以定制顯隱的動(dòng)畫效果，默認(rèn)為fade-in-linear。如果需要關(guān)閉tooltip功能，disabled屬性可以滿足這個(gè)需求，它接受一個(gè)Boolean，設(shè)置為true即可。

通過(guò) state 中的 disabled 控制是否觸發(fā) tooltip

constructor(props){
  super(props);


  this.state = {
    disabled: false
  }
}


render() {
  return (
    <Tooltip disabled={ this.state.disabled } content="點(diǎn)擊關(guān)閉 tooltip 功能" placement="bottom" effect="light">
      <Button onClick={ e => this.setState({ disabled: true}) }>點(diǎn)擊關(guān)閉 tooltip 功能</Button>
    </Tooltip>
  )
}

Attributes