Bootstrap 5 Popovers SASS

Bootstrap 5 Popovers SASS has a set of variables that are usually set to a default value but it can be changed accordingly to customize the Popover.

SASS variable of Popovers: SASS variables and their default values:

• $popover-font-size ($font-size-sm): This variable is used to change the font size of the text inside the popover.
• $popover-bg ($white): This variable is used to change the background color of the popover.
• $popover-max-width (276px): This variable is used to change the maximum width of the popover.
• $popover-border-width ($border-width): This variable is used to change the width of the border of the popover.
• $popover-border-color (rgba($black, .2)): This variable is used to change the color of the border of the popover.
• $popover-border-radius ($border-radius-lg): This variable is used to change the value of the border-radius of the popover. 
• $popover-inner-border-radius (subtract($popover-border-radius, $popover-border-width)): This variable is used to change the value of the border-radius on the inner side of the popover.
• $popover-box-shadow ($box-shadow): This variable is used to change the value of the box-shadow applied to the popover.
• $popover-header-bg (shade-color($popover-bg, 6%)): This variable is used to change the background color of the header part of the popover.
• $popover-header-color ($headings-color): This variable is used to change the color of the content in the header of the popover.
• $popover-header-padding-y (.5rem): This variable is used to change the padding at the y-axis in the header part of the popover.
• $popover-header-padding-x ($spacer): This variable is used to change the padding at the x-axis in the header part of the popover.
• $popover-body-color ($body-color): This variable is used to change the color of the content in the body part of the popover.
• $popover-body-padding-y ($spacer): This variable is used to change the padding at the y-axis in the body part of the popover.
• $popover-body-padding-x ($spacer): This variable is used to change the padding at the x-axis in the body part of the popover.
• $popover-arrow-width (1rem): This variable controls the value of the width of the arrow of the popover.
• $popover-arrow-height (.5rem): This variable controls the value of the height of the arrow of the popover.
• $popover-arrow-color ($popover-bg): This variable is used to change the color of the arrow of the popover.
• $popover-arrow-outer-color (fade-in($popover-border-color, .05)): This variable is used to change the outer color of the arrow of the popover.

Steps to override SCSS of Bootstrap:

Step 1: Install Bootstrap using the following command

npm i bootstrap

Step 2: Create your custom SCSS file and write the variable you want to override. Then include the bootstrap scss file using import.

$variable_to_override: value
@import "../node_modules/bootstrap/scss/bootstrap.scss";

Step 3: Convert the SCSS file to CSS using a live server extension.

Step 4: Include the CSS file in your HTML file.

<link rel="stylesheet" href="style.css">

Project Structure: The following structure will be generated after completing the above procedure:

Syntax:

$variable_to_override: value

Example 1: The code demonstrates how to set the $popover-bg, $popover-font-siz, $popover-border-color, $popover-border-width and $popover-body-color to customize the Popover:

• styles.scss:

CSS

$popover-bg: #000;
$popover-font-size: 1.2rem;
$popover-border-color: rgba(orange, 2);
$popover-border-width: 0.5rem;
$popover-body-color: #fff;

@import "./node_modules/bootstrap/scss/bootstrap.scss";

• styles.css: The above SCSS file is compiled into this CSS file(only the changes shown). This file is used in the below “index.html” file.

CSS

.popover {
    --bs-popover-bg: #000;
    --bs-popover-font-size: 1.2rem;
    --bs-popover-border-width: 0.5rem;
    --bs-popover-border-color: orange;
    --bs-popover-body-color: #fff;
    font-size: var(--bs-popover-font-size);
    background-color: var(--bs-popover-bg);
    border: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
}

• index.html:

HTML

<!doctype html>
<html lang="en">

<head>
     <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
        rel="stylesheet">
    <link rel="stylesheet"
          href="styles.css">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
    </script>
</head>

<body>
    <h1 class="m-4 text-success">
        GeeksforGeeks
    </h1>
    <h4 class="ms-4">
        Bootstrap 5 Popovers SASS
    </h4>
    <div class="container m-5 p-4 d-flex flex-column">
        <button type="button"
                class="btn btn-success m-1 w-50"
                id="topPop"
                data-bs-container="body"
                data-bs-toggle="popover"
                data-bs-placement="top"
                data-bs-content="This is a popover placed at the top.">
            Top Popover
        </button>
        <button type="button"
                class="btn btn-success m-1 w-50"
                id="rightPop"
                data-bs-container="body"
                data-bs-toggle="popover"
                data-bs-placement="right"
                data-bs-content=
                "This is a popover placed at the right.">
            Right Popover
        </button>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // Create the first popover instance
            var popover_1 =
                new bootstrap.Popover(document.getElementById("topPop"));

            // Create the second popover instance
            var popover_2 =
                new bootstrap.Popover(document.getElementById("rightPop"));

        });
    </script>
</body>

</html>

Output:

Example 2: The code demonstrates how to set the $popover-bg, $popover-font-size, $popover-max-width, $popover-border-color, $popover-border-width, $popover-border-radius and $popover-header-bg to customize the Popover:

• styles.scss:

CSS

$popover-bg: #eee;
$popover-font-size: 1.2rem;
$popover-max-width: 30rem;
$popover-border-color: rgba(darkgrey, 2);
$popover-border-width: 0.25rem;
$popover-border-radius: 1.25rem;
$popover-header-bg: lightgreen;

@import "./node_modules/bootstrap/scss/bootstrap.scss";

• styles.css: The above SCSS file is compiled into this CSS file(only the changes shown). This file is included in the below “index.html” file.

CSS

.popover {
    --bs-popover-bg: #eee;
    --bs-popover-font-size: 1.2rem;
    --bs-popover-max-width: 30rem;
    --bs-popover-border-color: darkgray;
    --bs-popover-border-width: 0.25rem;
    --bs-popover-border-radius: 1.25rem;
    --bs-popover-header-bg: lightgreen;
    max-width: var(--bs-popover-max-width);
    font-size: var(--bs-popover-font-size);
    background-color: var(--bs-popover-bg);
    border: var(--bs-popover-border-width) solid
            var(--bs-popover-border-color);
    border-radius: var(--bs-popover-border-radius);
}

• index.html

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
        rel="stylesheet">
    <link rel="stylesheet"
          href="styles.css">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
    </script>
</head>

<body>
    <h1 class="m-4 text-success">
        GeeksforGeeks
    </h1>
    <h4 class="ms-4">
        Bootstrap 5 Popovers SASS
    </h4>
    <div class="container m-5 p-4 d-flex flex-column">
        <button type="button"
                class="btn btn-success m-1 w-50"
                id="topPop" title="First Popover"
                data-bs-container="body"
                data-bs-toggle="popover"
                data-bs-placement="top"
                data-bs-content=
                "This is a popover placed at the top.">
            Top Popover
        </button>
        <button type="button"
                class="btn btn-success m-1 w-50"
                id="bottomPop"
                title="Second Popover"
                data-bs-container="body"
                data-bs-toggle="popover"
                data-bs-placement="bottom"
                data-bs-content=
                "This is a popover placed at the bottom.">
            Bottom Popover
        </button>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {

            // Create the first popover instance
            var popover_1 =
                new bootstrap.Popover(document.getElementById("topPop"));

            // Create the second popover instance
            var popover_2 =
                new bootstrap.Popover(document.getElementById("bottomPop"));

        });
    </script>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/components/popovers/#sass