Popovers

Examples

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

Popovers on Bootstrap

Simple Popover

                                    
                                        <button type="button" class="btn btn-info" data-bs-toggle="popover" title="Need Help?" data-bs-content="Click here to get support from our team. We're here 24/7 to assist you.">
                                            Get Support Info
                                        </button>

Dismiss on Next Click

                                    
                                        <button type="button" tabindex="0" class="btn btn-primary" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Get quick tips and tricks to improve your workflow instantly." title="Quick Tips">
                                            Show Tips
                                        </button>

Hover

                                    
                                        <button type="button" tabindex="0" class="btn btn-dark" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Discover features you didn’t know existed. Hover to explore more!" title="Exciting Features!">
                                            Please Hover Me
                                        </button>

Four Directions

                                    
                                        <!-- Popover on top -->
                                        <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="top" title="Top Popover" data-bs-content="This popover appears above the button. Great for tips or info.">
                                            Popover on top
                                        </button>
                                    
                                        <!-- Popover on bottom -->
                                        <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="bottom" title="Bottom Popover" data-bs-content="This popover shows below. Perfect for additional details.">
                                            Popover on bottom
                                        </button>
                                    
                                        <!-- Popover on right -->
                                        <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="right" title="Right Popover" data-bs-content="Slide in from the right to provide quick insights.">
                                            Popover on right
                                        </button>

                                        <!-- Popover on left -->
                                        <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="left" title="Left Popover" data-bs-content="Appears on the left side. Great for tooltips or notes.">
                                            Popover on left
                                        </button>

Custom Popovers

                                                                                    
                                        <!-- Primary Popover -->
                                        <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="popover-primary" data-bs-title="Primary Popover" data-bs-content="This is a primary-themed popover styled using CSS variables.">
                                            Primary Popover
                                        </button>
                                    
                                        <!-- Success Popover -->
                                        <button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="popover-success" data-bs-title="Success Popover" data-bs-content="This is a success-themed popover styled using CSS variables.">
                                            Success Popover
                                        </button>
                                    
                                        <!-- Danger Popover -->
                                        <button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="popover-danger" data-bs-title="Danger Popover" data-bs-content="This is a danger-themed popover styled using CSS variables.">
                                            Danger Popover
                                        </button>
                                    
                                        <!-- Info Popover -->
                                        <button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="popover-info" data-bs-title="Info Popover" data-bs-content="This is an info-themed popover styled using CSS variables.">
                                            Info Popover
                                        </button>
                                    
                                        <!-- Dark Popover -->
                                        <button type="button" class="btn btn-dark" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="popover-dark" data-bs-title="Dark Popover" data-bs-content="This is a dark-themed popover styled using CSS variables.">
                                            Dark Popover
                                        </button>
                                    
                                        <!-- Secondary Popover -->
                                        <button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="popover-secondary" data-bs-title="Secondary Popover" data-bs-content="This is a secondary-themed popover styled using CSS variables.">
                                            Secondary Popover
                                        </button>
                                    
                                        <!-- Purple Popover -->
                                        <button type="button" class="btn btn-purple" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="popover-purple" data-bs-title="Purple Popover" data-bs-content="This is a purple-themed popover styled using CSS variables.">
                                            Purple Popover
                                        </button>

Disabled Elements

                                    
                                        <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>