# Tooltips Tooltip

Tooltip component for a more stylish alternative to that anchor tag title attribute.


          const tooltipInstance = (
            <div>
              <Tooltip id='right' placement="right" className="in">
                Tooltip right
              </Tooltip>

              <Tooltip id='top' placement="top" className="in">
                Tooltip top
              </Tooltip>

              <Tooltip id='left' placement="left" className="in">
                Tooltip left
              </Tooltip>

              <Tooltip id='bottom' placement="bottom" className="in">
                Tooltip bottom
              </Tooltip>
            </div>
          );

          
        

# With OverlayTrigger

Attach and position tooltips with OverlayTrigger.


          const tooltip = (
            <Tooltip id='tooltip'><strong>Holy guacamole!</strong> Check this info.</Tooltip>
          );

          const positionerInstance = (
            <ButtonToolbar>
              <OverlayTrigger placement="left" overlay={tooltip}>
                <Button bsStyle="default">Holy guacamole!</Button>
              </OverlayTrigger>

              <OverlayTrigger placement="top" overlay={tooltip}>
                <Button bsStyle="default">Holy guacamole!</Button>
              </OverlayTrigger>

              <OverlayTrigger placement="bottom" overlay={tooltip}>
                <Button bsStyle="default">Holy guacamole!</Button>
              </OverlayTrigger>

              <OverlayTrigger placement="right" overlay={tooltip}>
                <Button bsStyle="default">Holy guacamole!</Button>
              </OverlayTrigger>
            </ButtonToolbar>
          );

          
        

# In text copy

Positioned tooltip in text copy.


          class LinkWithTooltip extends React.Component {
            render() {
              let tooltip = <Tooltip id='link-tooltip'>{this.props.tooltip}</Tooltip>;

              return (
                <OverlayTrigger
                  overlay={tooltip} placement="top"
                  delayShow={300} delayHide={150}
                >
                  <a href={this.props.href}>{this.props.children}</a>
                </OverlayTrigger>
              );
            }
          }

          const copyInstance = (
            <p className="muted" style={{ marginBottom: 0 }}>
              Tight pants next level keffiyeh <LinkWithTooltip tooltip="Default tooltip" href="#">you probably</LinkWithTooltip> haven't
              heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's
              fixie sustainable quinoa 8-bit american apparel <LinkWithTooltip tooltip={<span>Another <strong>tooltip</strong></span>} href="#">have a</LinkWithTooltip>
              terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four
              loko mcsweeney's cleanse vegan chambray. A really ironic artisan <LinkWithTooltip tooltip="Another one here too" href="#">whatever keytar</LinkWithTooltip>,
              scenester farm-to-table banksy Austin <LinkWithTooltip tooltip="The last tip!" href="#">twitter handle</LinkWithTooltip> freegan
              cred raw denim single-origin coffee viral.
            </p>
          );

          
        

# Props

Overlay Trigger

NameTypeDefaultDescription
animationboolean|elementTypeFadeUse animation
defaultOverlayShownbooleanfalseThe initial visibility state of the Overlay, for more nuanced visibility controll consider using the Overlay component directly.
delaynumberA millisecond delay amount to show and hide the Overlay once triggered
delayHidenumberA millisecond delay amount before hiding the Overlay once triggered.
delayShownumberA millisecond delay amount before showing the Overlay once triggered.
onEnterfunctionCallback fired before the Overlay transitions in
onEnteredfunctionCallback fired after the Overlay finishes transitioning in
onEnteringfunctionCallback fired as the Overlay begins to transition in
onExitfunctionCallback fired right before the Overlay transitions out
onExitedfunctionCallback fired after the Overlay finishes transitioning out
onExitingfunctionCallback fired as the Overlay begins to transition out
overlay requirednodeAn element or text to overlay next to the target.
rootClosebooleanfalseSpecify whether the overlay should trigger onHide when the user clicks outside the overlay
triggerone of: 'click', 'hover', 'focus' | array<one of: 'click', 'hover', 'focus'>falseSpecify whether the overlay should trigger onHide when the user clicks outside the overlay

Tooltip

NameTypeDefaultDescription
arrowOffsetLeftnumber|stringThe "left" position value for the Tooltip arrow.
arrowOffsetTopnumber|stringThe "top" position value for the Tooltip arrow.
id requiredstringAn html id attribute, necessary for accessibility
placementone of: 'top', 'right', 'bottom', 'left''right'Sets the direction the Tooltip is positioned towards.
positionLeftnumberThe "left" position value for the Tooltip.
positionTopnumberThe "top" position value for the Tooltip.
titlenodeTitle text