Giter Site home page Giter Site logo

tooltip's Introduction

rc-tooltip

React Tooltip

NPM version npm download build status Codecov bundle size dumi

Screenshot

Browsers support

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

Install

rc-tooltip

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
trigger string | string[] 'hover' which actions cause tooltip shown. enum of 'hover','click','focus'
visible boolean false whether tooltip is visible
defaultVisible boolean false whether tooltip is visible by default
placement string 'right' tooltip placement. enum of 'top','left','right','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom'
motion object Config popup motion. Please ref demo for example
onVisibleChange (visible: boolean) => void; Callback when visible change
afterVisibleChange (visible: boolean) => void; Callback after visible change
overlay ReactNode | () => ReactNode tooltip overlay content
overlayStyle object style of tooltip overlay
overlayClassName string className of tooltip overlay
prefixCls string 'rc-tooltip' prefix class name of tooltip
mouseEnterDelay number 0 delay time (in second) before tooltip shows when mouse enter
mouseLeaveDelay number 0.1 delay time (in second) before tooltip hides when mouse leave
getTooltipContainer (triggerNode: HTMLElement) => HTMLElement () => document.body get container of tooltip, default to body
destroyTooltipOnHide boolean false destroy tooltip when it is hidden
align object align config of tooltip. Please ref demo for usage example
showArrow boolean | object false whether to show arrow of tooltip
zIndex number config popup tooltip zIndex

Important Note

Tooltip requires a child node that accepts an onMouseEnter, onMouseLeave, onFocus, onClick event. This means the child node must be a built-in component like div or span, or a custom component that passes its props to its built-in component child.

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.

tooltip's People

Contributors

adaptunit avatar afc163 avatar ajuner avatar andrei-cacio avatar antollika avatar ashonea avatar benjycui avatar ddcat1115 avatar dependabot-preview[bot] avatar free-cutyapple avatar heroboy avatar kiner-tang avatar madccc avatar match-yichaozhu avatar moonrailgun avatar nickhsine avatar orzyyyy avatar paranoidjk avatar romainneutron avatar sehuo avatar shaodahong avatar simeg avatar warent avatar warmhug avatar xrkffgg avatar ycjcl868 avatar yesmeck avatar yiminghe avatar yoyo837 avatar zombiej avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.