Components

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

<div>
  <Tooltip placement="right" className="in" id="tooltip-right">
    Tooltip right
  </Tooltip>

  <Tooltip placement="top" className="in" id="tooltip-top">
    Tooltip top
  </Tooltip>

  <Tooltip placement="left" className="in" id="tooltip-left">
    Tooltip left
  </Tooltip>

  <Tooltip placement="bottom" className="in" id="tooltip-bottom">
    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>
);

render(positionerInstance);

#In text copy

Positioned tooltip in text copy.

Tight pants next level keffiyeh you probably 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 have aterry 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 whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

function LinkWithTooltip({ id, children, href, tooltip }) {
  return (
    <OverlayTrigger
      overlay={<Tooltip id={id}>{tooltip}</Tooltip>}
      placement="top"
      delayShow={300}
      delayHide={150}
    >
      <a href={href}>{children}</a>
    </OverlayTrigger>
  );
}

render(
  <p className="muted" style={{ marginBottom: 0 }}>
    Tight pants next level keffiyeh{' '}
    <LinkWithTooltip tooltip="Default tooltip" href="#" id="tooltip-1">
      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="#"
      id="tooltip-2"
    >
      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="#" id="tooltip-3">
      whatever keytar
    </LinkWithTooltip>
    , scenester farm-to-table banksy Austin{' '}
    <LinkWithTooltip tooltip="The last tip!" href="#" id="tooltip-4">
      twitter handle
    </LinkWithTooltip>{' '}
    freegan cred raw denim single-origin coffee viral.
  </p>
);

#Props

#OverlayTrigger[source]

NameTypeDefaultDescription
trigger
triggerType | arrayOf
['hover', 'focus']

Specify which action or actions trigger Overlay visibility

delay
number

A millisecond delay amount to show and hide the Overlay once triggered

delayShow
number

A millisecond delay amount before showing the Overlay once triggered.

delayHide
number

A millisecond delay amount before hiding the Overlay once triggered.

defaultOverlayShown
boolean
false

The initial visibility state of the Overlay. For more nuanced visibility control, consider using the Overlay component directly.

overlay required
node

An element or text to overlay next to the target.

onBlur
function
onClick
function
onFocus
function
onMouseOut
function
onMouseOver
function
target
one of: null
onHide
one of: null
show
one of: null

#Tooltip[source]

NameTypeDefaultDescription
id required
string|number

An html id attribute, necessary for accessibility

placement
one of: 'top', 'right', 'bottom', 'left'
'right'

Sets the direction the Tooltip is positioned towards.

positionTop
number | string

The "top" position value for the Tooltip.

positionLeft
number | string

The "left" position value for the Tooltip.

arrowOffsetTop
number | string

The "top" position value for the Tooltip arrow.

arrowOffsetLeft
number | string

The "left" position value for the Tooltip arrow.

bsClass
string
'tooltip'

Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.