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

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
	Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
	Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
	Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
	Tooltip on left
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
	Tooltip with HTML
</button>
<button type="button" class="btn btn-link" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>on</u> <b>Link</b>">
	Tooltip on Link
</button>

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;

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;

<template>
    <HkTooltip title="Tooltip on top" placement="top">
        <button type="button" class="btn btn-secondary">
            Tooltip on top
        </button>
    </HkTooltip>
    <HkTooltip title="Tooltip on right" placement="right">
        <button type="button" class="btn btn-secondary">
            Tooltip on right
        </button>
    </HkTooltip>
    <HkTooltip title="Tooltip on bottom" placement="bottom">
        <button type="button" class="btn btn-secondary">
            Tooltip on bottom
        </button>
    </HkTooltip>
    <HkTooltip title="Tooltip on left" placement="left">
        <button type="button" class="btn btn-secondary">
            Tooltip on left
        </button>
    </HkTooltip>
    <HkTooltip title="<em>Tooltip</em> <u>with</u> <b>HTML</b>" htmlContent="true">
        <button type="button" class="btn btn-secondary">
            Tooltip with HTML
        </button>
    </HkTooltip>
    <HkTooltip title="<em>Tooltip</em> <u>on</u> <b>Link</b>" htmlContent="true">
        <button type="button" class="btn btn-link">
            Tooltip on Link
        </button>
    </HkTooltip>
</template>
<script setup>
import HkTooltip from '@/components/@hk-tooltip/HkTooltip.vue';
</script>

<template>
    <HkTooltip title="Tooltip on top" placement="top">
        <button type="button" class="btn btn-secondary">
            Tooltip on top
        </button>
    </HkTooltip>
    <HkTooltip title="Tooltip on right" placement="right">
        <button type="button" class="btn btn-secondary">
            Tooltip on right
        </button>
    </HkTooltip>
    <HkTooltip title="Tooltip on bottom" placement="bottom">
        <button type="button" class="btn btn-secondary">
            Tooltip on bottom
        </button>
    </HkTooltip>
    <HkTooltip title="Tooltip on left" placement="left">
        <button type="button" class="btn btn-secondary">
            Tooltip on left
        </button>
    </HkTooltip>
    <HkTooltip title="<em>Tooltip</em> <u>with</u> <b>HTML</b>" htmlContent="true">
        <button type="button" class="btn btn-secondary">
            Tooltip with HTML
        </button>
    </HkTooltip>
    <HkTooltip title="<em>Tooltip</em> <u>on</u> <b>Link</b>" htmlContent="true">
        <button type="button" class="btn btn-link">
            Tooltip on Link
        </button>
    </HkTooltip>
</template>
<script setup>
import HkTooltip from '@/components/@hk-tooltip/HkTooltip.vue';
</script>

<script>
import HkTooltip from '@/components/@hk-tooltip/HkTooltip.svelte';
</script>
<div>
    <HkTooltip title="Tooltip on top" placement="top">
        <button type="button" class="btn btn-secondary">
            Tooltip on top
        </button>
    </HkTooltip>
    <HkTooltip title="Tooltip on right" placement="right">
        <button type="button" class="btn btn-secondary">
            Tooltip on right
        </button>
    </HkTooltip>
    <HkTooltip title="Tooltip on bottom" placement="bottom">
        <button type="button" class="btn btn-secondary">
            Tooltip on bottom
        </button>
    </HkTooltip>
    <HkTooltip title="Tooltip on left" placement="left">
        <button type="button" class="btn btn-secondary">
            Tooltip on left
        </button>
    </HkTooltip>
    <HkTooltip title="<em>Tooltip</em> <u>with</u> <b>HTML</b>" htmlContent="true">
        <button type="button" class="btn btn-secondary">
            Tooltip with HTML
        </button>
    </HkTooltip>
    <HkTooltip title="<em>Tooltip</em> <u>on</u> <b>Link</b>" htmlContent="true">
        <button type="button" class="btn btn-link">
            Tooltip on Link
        </button>
    </HkTooltip>
</div>

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.