Newlywed Party Monsters

    This package has been deprecated

    Author message:

    WARNING: This project has been renamed to react-floater. Re-install using react-floater and remove react-tooltips


    0.4.6 • Public • Published

    React Tooltips

    NPM version build status Maintainability Test Coverage

    View the demo

    You can view and edit the code for each tooltip here



    npm install --save react-tooltips

    Import it into your component:

    import Tooltip from 'react-tooltips';
    <Tooltip content="This is the tooltip content">
        <span>click me</span>

    And voíla!


    You can use your own components to render the tooltip with the prop component.
    Check WithStyledComponents.js in the demo for an example.

    If you use your own components as children it will receive an innerRef prop that you must set in your HTMLElement:
    Stateless components don't accept refs...

    const Button = ({ innerRef, }) => (
      <button ref={innerRef} {} />
    <Tooltip content="This is the tooltip content">
        <Button>click me</Button>

    This works transparently with styled-components (and possible other modules):

    const Wrapper = styled.div`
      margin: 0 auto;
      max-width: 500px;
      line-height: 1.5;
    <Tooltip content="This is the tooltip content">
        <Wrapper>click me</Wrapper>


    autoOpen {bool} ▶︎ false
    Open the tooltip automatically.

    callback {func}
    It will be called when the tooltip change state with 2 parameters:

    • action {string} open or close
    • props {object} the props you passed.

    children {node}
    An element to trigger the tooltip.

    component {element|function}
    A React component or function to as a custom UI for the tooltip.
    The prop closeTooltip will be available in your component.

    content {node}
    The tooltip content. It can be anything that can be rendered.
    This is the only required props, unless you pass a component.

    debug {bool} ▶︎ false
    Log some basic actions.
    You can also set a global variable ReactTooltipsDebug = true;

    disableAnimation {bool} ▶︎ false
    Animate the tooltip on scroll/resize.

    disableFlip {bool} ▶︎ false
    Disable changes in the tooltip position on scroll/resize.

    disableHoverToClick {bool} ▶︎ false
    Don't convert hover event to click on mobile.

    event {string} ▶︎ click
    The event that will trigger the tooltip. It can be hover | click.
    These won't work in controlled mode.

    eventDelay {number} ▶︎ 0.4
    The amount of time (in seconds) that hover tooltips should wait after a mouseLeave event before hiding.
    Only valid for event type hover.

    footer {node}
    It can be anything that can be rendered.

    id {string|number}
    In case that you need to identify the portal.

    offset {number} ▶︎ 15
    The distance between the tooltip and its target in pixels.

    open {bool} ▶︎ false
    The switch between normal and controlled modes.
    Setting this prop will disabled the normal behavior.

    placement {string} ▶︎ bottom
    The placement of the tooltip. It will update the position if there's no space available.

    It can be:

    • top (top-start, top-end)
    • bottom (bottom-start, bottom-end)
    • left (left-start, left-end)
    • right (right-start, right-end
    • auto
    • center

    showCloseButton {bool} ▶︎ false
    It will show a ⨉ button to close the tooltip.
    This will be true when you change wrapperOptions position.

    styles {object} ▶︎ defaultStyles
    You can customize the UI using this prop.

    target {object|string}
    The target used to calculate the tooltip position. If it's not set, it will use the children as the target.

    title {node}
    It can be anything that can be rendered.

    wrapperOptions {object}
    Position the wrapper relative to the target.
    You need to set a target for this to work.

        offset: number, // The distance between the wrapper and the target. It can be negative.
        placement: string, // the same options as above, except center
        position: bool, // Set to true to position the wrapper


    You can customize everything with the styles prop.
    Only set the properties you want to change and the default styles will be merged.

    Check it styles.js for the syntax.


    The wrapper will trigger the events and use itself as the tooltip's target.

    <Tooltip content="This is the tooltip content">
        <span>click me</span>

    The wrapper will trigger the events but the tooltip will use the target prop to position itself.

    <div className="App">
        <img src="some-path" />
          content="This is the tooltip content"
          target=".App img"
            <span>click me</span>

    The same as the proxy mode but the wrapper will be positioned relative to the target.

    <div className="App">
        <img src="" width="100" className="my-super-image" />
            content="This is the tooltip content"
                offset: -22,
                placement: 'top',
                position: true,
        <span style={{ color: '#f04', fontSize: 34 }}></span>

    When you set a boolean to the open prop it will enter the controlled mode and it will not respond to events.
    In this mode you don't even need to have children

    <div className="App">
        <img src="some-path" />
            content="This is the tooltip content"
            target=".App img"


    npm i react-tooltips

    DownloadsWeekly Downloads






    Unpacked Size

    120 kB

    Total Files


    Last publish


    • gilbarbara