brandv1.0
Utilities
Data Display
Data Entry

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.

							
                                
<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>
Disabled elements

Elements with the disabled attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper <div> or <span>, ideally made keyboard-focusable using tabindex="0".

							
                                
<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>
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.

Dismissible popover
							
                                
<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>
Jump to