Powerful Svelte-Bootstrap SaaS App Template

Admin CRM Application Template

Robust Next.js SaaS App Template

Powerful React-Bootstrap SaaS App Template

Modern Remix SaaS App Template

VueJS-Bootstrap SaaS App Template

Intuitive Nuxt-Bootstrap SaaS App Template

Popover

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

Basic examples

Four directions are available: Top, Right, Bottom and Left. For adding popovers read official documentation of bootstrap.

<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" title="Popover title" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	Click to Toggle
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
	Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	Popover on left
</button>

import React from 'react';
import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
const BasicPopover = () => {
    // popover layout-1
    const popover1 = (
        <Popover id="popover-basic">
            <Popover.Header as="h3">Popover right</Popover.Header>
            <Popover.Body>
                Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
            </Popover.Body>
        </Popover>
    );
    // popover layout-2
    const popover2 = (
        <Popover id="popover-basic">
            <Popover.Body>
                Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
            </Popover.Body>
        </Popover>
    );
  return (
    <>
        <OverlayTrigger trigger="click" placement="top" overlay={popover1}>
            <Button variant="secondary">Click to Toggle</Button>
        </OverlayTrigger>
        <OverlayTrigger trigger="click" placement="top" overlay={popover2}>
            <Button variant='secondary' >Popover on top</Button>
        </OverlayTrigger>
        <OverlayTrigger trigger="click" placement="right" overlay={popover2}>
            <Button variant='secondary' >Popover on right</Button>
        </OverlayTrigger>
        <OverlayTrigger trigger="click" placement="bottom" overlay={popover2}>
            <Button variant='secondary' >Popover on bottom</Button>
        </OverlayTrigger>
        <OverlayTrigger trigger="click" placement="left" overlay={popover2}>
            <Button variant='secondary' >Popover on left</Button>
        </OverlayTrigger>
    </>
  );
}
export default BasicPopover;

import React from 'react';
import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
const BasicPopover = () => {
    // popover layout-1
    const popover1 = (
        <Popover id="popover-basic">
            <Popover.Header as="h3">Popover right</Popover.Header>
            <Popover.Body>
                Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
            </Popover.Body>
        </Popover>
    );
    // popover layout-2
    const popover2 = (
        <Popover id="popover-basic">
            <Popover.Body>
                Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
            </Popover.Body>
        </Popover>
    );
  return (
    <>
        <OverlayTrigger trigger="click" placement="top" overlay={popover1}>
            <Button variant="secondary">Click to Toggle</Button>
        </OverlayTrigger>
        <OverlayTrigger trigger="click" placement="top" overlay={popover2}>
            <Button variant='secondary' >Popover on top</Button>
        </OverlayTrigger>
        <OverlayTrigger trigger="click" placement="right" overlay={popover2}>
            <Button variant='secondary' >Popover on right</Button>
        </OverlayTrigger>
        <OverlayTrigger trigger="click" placement="bottom" overlay={popover2}>
            <Button variant='secondary' >Popover on bottom</Button>
        </OverlayTrigger>
        <OverlayTrigger trigger="click" placement="left" overlay={popover2}>
            <Button variant='secondary' >Popover on left</Button>
        </OverlayTrigger>
    </>
  );
}
export default BasicPopover;

<script setup>
import HkPopover from '@/components/@hk-popover/HkPopover.vue'
</script>
<template>
    <HkPopover title="Popover title" content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="top">
        <button class="btn btn-secondary">Click to Toggle</button>
    </HkPopover>
    <HkPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="top">
        <button type="button" class="btn btn-secondary">
            Popover on top
        </button>
    </HkPopover>
    <HkPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="right">
        <button type="button" class="btn btn-secondary">
            Popover on right
        </button>
    </HkPopover>
    <HkPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="bottom">
        <button type="button" class="btn btn-secondary">
            Popover on bottom
        </button>
    </HkPopover>
    <HkPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="left">
        <button type="button" class="btn btn-secondary">
            Popover on left
        </button>
    </HkPopover>
</template>

<script setup>
import HkPopover from '@/components/@hk-popover/HkPopover.vue'
</script>
<template>
    <HkPopover title="Popover title" content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="top">
        <button class="btn btn-secondary">Click to Toggle</button>
    </HkPopover>
    <HkPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="top">
        <button type="button" class="btn btn-secondary">
            Popover on top
        </button>
    </HkPopover>
    <HkPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="right">
        <button type="button" class="btn btn-secondary">
            Popover on right
        </button>
    </HkPopover>
    <HkPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="bottom">
        <button type="button" class="btn btn-secondary">
            Popover on bottom
        </button>
    </HkPopover>
    <HkPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="left">
        <button type="button" class="btn btn-secondary">
            Popover on left
        </button>
    </HkPopover>
</template>

<script setup>
import HkPopover from '../components/@hk-popover/HkPopover.svelte'
</script>
<div>
    <HkPopover title="Popover title" content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="top">
        <button class="btn btn-secondary">Click to Toggle</button>
    </HkPopover>
    <HkPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="top">
        <button type="button" class="btn btn-secondary">
            Popover on top
        </button>
    </HkPopover>
    <HkPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="right">
        <button type="button" class="btn btn-secondary">
            Popover on right
        </button>
    </HkPopover>
    <HkPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="bottom">
        <button type="button" class="btn btn-secondary">
            Popover on bottom
        </button>
    </HkPopover>
    <HkPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="left">
        <button type="button" class="btn btn-secondary">
            Popover on left
        </button>
    </HkPopover>
</div>

Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). 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.

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
	<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

import React from 'react';
import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
const DisabledPopover = () => {
    // popover layout
    const popover = (
        <Popover id="disabled-popover">
            <Popover.Body>
                Disabled popover
            </Popover.Body>
        </Popover>
    );
  return (
    <OverlayTrigger placement="right" overlay={popover}>
        <span className="d-inline-block">
            <Button disabled style={{ pointerEvents: 'none' }}>
                Disabled button
            </Button>
        </span>
    </OverlayTrigger>
  );
}
export default DisabledPopover;

import React from 'react';
import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
const DisabledPopover = () => {
    // popover layout
    const popover = (
        <Popover id="disabled-popover">
            <Popover.Body>
                Disabled popover
            </Popover.Body>
        </Popover>
    );
  return (
    <OverlayTrigger placement="right" overlay={popover}>
        <span className="d-inline-block">
            <Button disabled style={{ pointerEvents: 'none' }}>
                Disabled button
            </Button>
        </span>
    </OverlayTrigger>
  );
}
export default DisabledPopover;

<script setup>
import HkPopover from '@/components/@hk-popover/HkPopover.vue'
</script>
<template>
    <HkPopover content="Disabled popover" trigger="hover focus">
        <button class="btn btn-primary" type="button" disabled>Disabled button</button>
    </HkPopover>
</template>

<template>
    <span
        v-b-popover="{
            content: 'Disabled popover',
            placement: 'right',
        }"
    >
        <BButton variant="primary" disabled>Disabled button</BButton>
    </span>
</template>

<script>
import HkPopover from '@/components/@hk-popover/HkPopover.svelte'
</script>
<template>
    <HkPopover content="Disabled popover" trigger="hover focus">
        <button class="btn btn-primary" type="button" disabled>Disabled button</button>
    </HkPopover>
</template>

Dismiss on next clicks

Use the focus trigger to dismiss popovers on the user's next click of a different element than the toggle element.

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
	<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

import React from 'react';
import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
const DismissOnNextClick = () => {
    // popover layout
    const popover = (
        <Popover id="popover-onClick">
            <Popover.Header as="h3">Dismissible popover</Popover.Header>
            <Popover.Body>
                And here's some amazing content. It's very engaging. Right?
            </Popover.Body>
        </Popover>
    );
  return (
    <OverlayTrigger trigger="focus" placement="top" overlay={popover}>
        <Button variant="danger" >Dismissible popover</Button>
    </OverlayTrigger>
  );
}
export default DismissOnNextClick;

import React from 'react';
import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
const DismissOnNextClick = () => {
    // popover layout
    const popover = (
        <Popover id="popover-onClick">
            <Popover.Header as="h3">Dismissible popover</Popover.Header>
            <Popover.Body>
                And here's some amazing content. It's very engaging. Right?
            </Popover.Body>
        </Popover>
    );
  return (
    <OverlayTrigger trigger="focus" placement="top" overlay={popover}>
        <Button variant="danger" >Dismissible popover</Button>
    </OverlayTrigger>
  );
}
export default DismissOnNextClick;

<script setup>
import HkPopover from '@/components/@hk-popover/HkPopover.vue'
</script>
<template>
    <HkPopover title="Dismissible popover"
    content="And here's some amazing content. It's very engaging. Right?" placement="right"
    trigger="focus">
        <a class="btn btn-danger" role="button">Dismissible popover</a>
    </HkPopover>
</template>

<script setup>
import HkPopover from '@/components/@hk-popover/HkPopover.vue'
</script>
<template>
    <HkPopover title="Dismissible popover"
    content="And here's some amazing content. It's very engaging. Right?" placement="right"
    trigger="focus">
        <a class="btn btn-danger" role="button">Dismissible popover</a>
    </HkPopover>
</template>

<script>
import HkPopover from '../components/@hk-popover/HkPopover.svelte'
</script>
<div>
    <HkPopover title="Dismissible popover"
    content="And here's some amazing content. It's very engaging. Right?" placement="right"
    trigger="focus">
        <a class="btn btn-danger" role="button">Dismissible popover</a>
    </HkPopover>
</div>

Basic examples
Disabled elements
Dismiss on next clicks