Components

#Tooltips Tooltip

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
children required
element
trigger
'hover' | 'click' |'focus' | Array<'hover' | 'click' |'focus'>
['hover', 'focus']

Specify which action or actions trigger Overlay visibility

delay
number | shape

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

defaultShow
boolean

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

overlay
function | element

An element or text to overlay next to the target.

popperConfig
object

A Popper.js config object passed to the the underlying popper instance.

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: 'auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'
'right'

Sets the direction the Tooltip is positioned towards.

This is generally provided by the Overlay component positioning the tooltip

arrowProps
{ ref: ReactRef, style: Object }

An Overlay injected set of props for positioning the tooltip arrow.

This is generally provided by the Overlay component positioning the tooltip

scheduleUpdate
function
outOfBoundaries
any
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.