Bootstrap 5 Tooltips using function with popperConfig

Last Updated : 21 Jun, 2023

Bootstrap 5 Tooltips Using function with popperConfig facilitates an interface that allows us to change the default Popper Configuration. Popper is a framework that helps us to create popups in websites. PopperConfig is actually an option in bootstrap.Tooltip class that can be initialized with an element and options attribute to embed tooltip to HTML element.

Syntax:

var tooltip = new bootstrap.Tooltip(Element, {
    popperConfig : <function>|null|object
})

From the above syntax, we can observe that popperConfig can be of the type object or function:

When popperConfig is an object:

Syntax:

popperConfig : {modifiers : array , placement : string}

Parameters:

modifiers: It is used to modify the working of the tooltip.
placement: It takes values like ‘auto’, ‘auto-start’, ‘auto-end’, ‘top’, ‘top-start’, ‘top-end’, ‘bottom’, ‘bottom-start’, ‘bottom-end’, ‘right’, ‘right-start’, ‘right-end’, ‘left’, ‘left-start’, ‘left-end’ to change the position of the tooltip.

When popperConfig is a function:

Syntax:

popperConfig : (defaultPopperConfig)=>{ ... }

Parameter:

defaultPopperConfig: It is the default popper configuration.

Steps to add a tooltip with popperConfig:

Step 1: Create an HTML page with Bootstrap CDN

<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" 
        integrity=
"sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" 
        crossorigin="anonymous">
</script>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
      rel="stylesheet" 
      integrity=
"sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" 
      crossorigin="anonymous">

Step 2: Add a button with data attribute to create a tooltip

<button id="example" 
        data-bs-toggle="tooltip" 
        class="btn btn-primary" 
        title="tooltip">
        Tooltip Button
</button>

Step 3: Add a script that selects the above button and modifies its tooltip features

<script>
    var example = document.getElementById("example");
    var tooltip = new bootstrap.Tooltip(example,{
        popperConfig : ()=>{ ... }
    })
</script>

Example 1: In this example, we will print the defaultPopperConfig which represents the default popper configuration of the popper framework.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity= 
"sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
          crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
            integrity= 
"sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
            crossorigin="anonymous"> 
    </script> 
</head> 
  
<body class="p-5"> 
    <h1 class="text-success"> 
        GeeksforGeeks 
    </h1> 
    <h3 class="text-break"> 
        Bootstrap 5 Tooltips Using  
        function with popperConfig 
    </h3> 
    <button id="example" 
            type="button" 
            class="btn btn-secondary" 
            data-bs-toggle="tooltip" 
            data-bs-placement="top"
            title="Tooltip in Boostrap"> 
        Tooltip Button 
    </button> 
</body> 
  
<script> 
    var example = document.getElementById('example') 
    var tooltip = new bootstrap.Tooltip(example, { 
        popperConfig: (dpc) => { 
            console.log(dpc) 
            return dpc; 
        } 
    }) 
</script> 
  
</html>

Output:

ezgifcom-video-to-gif(6).gif

Example 2: In this example, we will toggle the placement property of the popper configuration between the top and bottom using popperConfig. Here, we have created a <script> tag & declare a variable by the name toggle and initialize it to 0. Now, Select the button in HTML code and add the below code inside bootstrap.Tooltip

(toggle)? dpc.placement = "bottom" : dpc.placement = "top"
toggle = !toggle; // declare a variable outside this function
return dpc;

The above code toggles the tooltip between the top and bottom every time the user hovers the button.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity= 
"sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" 
          crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
            integrity= 
"sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
            crossorigin="anonymous"> 
    </script> 
</head> 
  
<body class="p-5"> 
    <h1 class="text-success"> 
        GeeksforGeeks 
    </h1> 
    <h3 class="text-break"> 
        Bootstrap 5 Tooltips Using 
        function with popperConfig 
    </h3> 
    <button id="example" 
            type="button" 
            class="btn btn-secondary"
            data-bs-toggle="tooltip" 
            data-bs-placement="top"
            title="Tooltip in Boostrap"> 
        Button with toggling tooltip 
    </button> 
</body> 
<script> 
    var example = document.getElementById('example') 
    var toggle = 0 
    var tooltip = new bootstrap.Tooltip(example, { 
        popperConfig: (dpc) => { 
            (toggle) ? dpc.placement = "bottom" : dpc.placement = "top" 
            toggle = !toggle; 
            return dpc; 
        } 
    }) 
</script> 
  
</html>