brandv1.0
Utilities
Data Display
Data Entry
Feedback
Tables
Charts
Maps
Navigation
BEHAVIORAL
Layout

Explore Templates

Tooltip

Documentation and examples for adding custom React-Bootstrap tooltips with props.

Basic examples

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

Preview
Jsx
Props
import React from 'react';
import { Button } from 'react-bootstrap';
import NubraTooltip from '../../../components/@nubra-tooltip/NubraTooltip';

const BasicTooltip = () => {
  return (
    <>
        <NubraTooltip id="tt1" placement="top">
            <Button variant='secondary'>Tooltip on top </Button>
        </NubraTooltip>

        <NubraTooltip id="tt2" placement="right">
            <Button variant='secondary'>Tooltip on right </Button>
        </NubraTooltip>

        <NubraTooltip id="tt3" placement="bottom">
            <Button variant='secondary'>Tooltip on bottom </Button>
        </NubraTooltip>

        <NubraTooltip id="tt4" placement="left">
            <Button variant='secondary'>Tooltip on left </Button>
        </NubraTooltip>

        <NubraTooltip id="tt5" placement="top" title={<span><em>Tooltip</em> <u>with</u> <b>HTML</b></span>}>
            <Button variant='secondary'>Tooltip on with HTML </Button>
        </NubraTooltip>

        <NubraTooltip id="tt6" placement="top" title={<span><em>Tooltip</em> <u>on</u> <b>Link</b></span>}>
            <Button variant='link'>Tooltip on Link</Button>
        </NubraTooltip>
    </>
  );
}

export default BasicTooltip;
propsValuesDefault
idrequiredstringAn html id attribute, necessary for accessibility
placement'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
titlestring | element | function''
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot hover or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the overlay from a wrapper <div> or <span> and override the pointer-events on the disabled element.

Preview
Jsx
import React from 'react';
import { Button } from 'react-bootstrap';
import NubraTooltip from '../../../components/@nubra-tooltip/NubraTooltip';

const DisabledTooltip = () => {
  return (
    <NubraTooltip id="tooltip-disabled" placement="top" title="Disabled button" >
        <span className="d-inline-block">
            <Button disabled style={{ pointerEvents: 'none' }}>
                Disabled button
            </Button>
        </span>
    </NubraTooltip>
  );
}

export default DisabledTooltip;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Jump to