README.md



rc-tooltip


React Tooltip


Screenshot


Browsers support


IE / Edge

Firefox

Chrome

Safari

Opera


IE 8 + ✔
Firefox 31.0+ ✔
Chrome 31.0+ ✔
Safari 7.0+ ✔
Opera 30.0+ ✔


Install


Usage

var Tooltip = require('rc-tooltip');
var React = require('react');
var ReactDOM = require('react-dom');

// By default, the tooltip has no style.
// Consider importing the stylesheet it comes with:
// 'rc-tooltip/assets/bootstrap_white.css'

ReactDOM.render(
  <Tooltip placement="left" trigger={['click']} overlay={<span>tooltip</span>}>
    <a href="#">hover</a>
  </Tooltip>,
  container
);


Examples

npm start and then go to
http://localhost:8007/examples

Online examples: https://react-component.github.io/tooltip/examples/


API


Props


        name
        type
        default
        description
    
    
          overlayClassName
          string
          
          additional className added to popup overlay
        
        
          trigger
          string | 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
        
        
          prefixCls
          String
          rc-tooltip
          prefix class name
        
        
          transitionName
          String|Object
          
          same as https://github.com/react-component/animate

        
          onVisibleChange
          Function
          
          call when visible is changed
        
        
          afterVisibleChange
          Function
          
          call after visible is changed
        
        
          visible
          boolean
          
          whether tooltip is visible
        
        
          defaultVisible
          boolean
          
          whether tooltip is visible initially
        
        
          placement
          String
          
          one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']
        
        
          align
          Object: alignConfig of [dom-align](https://github.com/yiminghe/dom-align)
          
          value will be merged into placement's config
        
        
          onPopupAlign
          function(popupDomNode, align)
          
          callback when popup node is aligned
        
        
          overlay
          React.Element | () => React.Element
          
          popup content
        
        
          overlayInnerStyle
          Object
          
          set overlay inner style
        
        
          arrowContent
          React.Node
          null
          arrow content
        
        
          getTooltipContainer
          function
          
          Function returning html node which will act as tooltip container. By default the tooltip attaches to the body. If you want to change the container, simply return a new element.
        
        
          destroyTooltipOnHide
          boolean | { keepParent: boolean }
          false
          whether destroy tooltip when tooltip is hidden.In general, destroyTooltipOnHide will only remove itself instead of parent container of it.Parent container will be removed include tooltip when keepParent is true
        
        
          id
          String
          
          Id which gets attached to the tooltip content. Can be used with aria-describedby to achieve Screenreader-Support.
        
    
Note

Tooltip requires child node accepts onMouseEnter, onMouseLeave, onFocus, onClick event.


Accessibility

For accessibility purpose you can use the id prop to link your tooltip with another element. For example attaching it to an input element:

<Tooltip
    ...
    id={this.props.name}>
    <input type="text"
           ...
           aria-describedby={this.props.name}/>
</Tooltip>


If you do it like this, a screenreader would read the content of your tooltip if you focus the input element.

NOTE: role="tooltip" is also added to expose the purpose of the tooltip element to a screenreader.


Development

npm install
npm start


Test Case

npm test
npm run chrome-test


Coverage

npm run coverage


License

rc-tooltip is released under the MIT license.