How do you get a Bootstrap 5.2 Popover to fire in an "if" statement?-CodePudding

I am using popovers as part of an input validation process. I have the idea but I can't work out the syntax on how to get this to work.

https://jsbin.com/sufitelodo/1/edit?html,js,output

This JSBin is the basis of it.

I don't know how to write the HTML for a hidden Bootstrap 5.2 popover that comes up only when called in an if statement. To run this, type the number 0 into input A and any number into input B and the same number again into input C. The first error should be that input A = 0 and then you change that to any non-zero and then the second error should happen when you try and submit. I would like to change from the alert boxes to popovers.

const popoverTriggerList = [].slice.call(
  document.querySelectorAll('[data-bs-toggle="popover"]')
);
const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl, { html: true });
});



document.getElementById("button").addEventListener("click", testMe);

function testMe() {
  let inputA = parseFloat(document.getElementById("aInput").value);
  let inputB = parseFloat(document.getElementById("bInput").value);
  let inputC = parseFloat(document.getElementById("cInput").value);
  let popoverTest1 = document.getElementById("popoverTest1");
  let popoverTest2 = document.getElementById("popoverTest2");
  
  if (inputA === 0) {
    // Make popoverTest1 come up here
    //alert("This is when popoverTest1 should fire");
    bootstrap.Popover.getOrCreateInstance('#popoverTest1').show()
    
    return false;
    
  } else if (inputB === inputC) {
    // Make popoverTest2 come up here
    //alert("This is when popoverTest2 should fire");
    bootstrap.Popover.getOrCreateInstance('#popoverTest2').show()
    
    return false;
  }
}

document.getElementById("close1").addEventListener("click", closePop);
function closePop () {
  bootstrap.Popover.getInstance('#popoverTest1').hide();
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<label for="aInput">A Input</label>
  <input type="number" id="aInput">
  <span id="popoverTest1" 
          data-bs-container="body" 
          data-bs-toggle="popover" 
          data-bs-trigger="manual" 
          data-bs-content="Top popover"
          data-bs-title='This is zero <a href="" id="close1">x</a>'
          data-bs-content='Change it to something non-zero'>
</span>
  <br><br>
  <label for="bInput">B Input</label>
  <input type="number" id="bInput">
  <span id="popoverTest2" 
          data-bs-container="body" 
          data-bs-toggle="popover" 
          data-bs-trigger="manual" 
          data-bs-content="Top popover"
          data-bs-title="This is the same as Input C"
          data-bs-content="Change it so it's not the same as Input C">
</span>
  <br> <br>
  <label for="cInput">C Input</label>
  <input type="number" id="cInput">
 
<button type="button"  id="button">Hit Me</button>
  
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL jjXkk Q2h455rYXK/7HAuoJl 0I4" crossorigin="anonymous"></script>

So, instead of the alerts I would like a cleaner popover from Bootstrap, but the syntax and getting them to work (even after trying to decipher the documentation) isn't on my side. Then after the popover is opened it needs to be able to be closed again.

I tried data-bs-trigger="focus" but this does not seem to have enabled closing.

Thanks kindly for your help on this.

*** Edit - I have updated the code to allow for just using Vanilla but there is an error with using the close button... I can't seem to dispose of the popover.

CodePudding user response：

You need to get the instance of the appropriate Popover and show it..

function testMe() {
    let inputA = parseFloat(document.getElementById("aInput").value);
    let inputB = parseFloat(document.getElementById("bInput").value);
    let inputC = parseFloat(document.getElementById("cInput").value);
    let popoverTest1 = document.getElementById("popoverTest1");
    let popoverTest2 = document.getElementById("popoverTest2");
    if (inputA === 0) {
        // Make popoverTest1 come up here
        // alert("This is when popoverTest1 should fire");
        // document.getElementById("popoverTest1").popover('show')
        bootstrap.Popover.getOrCreateInstance('#popoverTest1').show()
    }
    else if (inputB === inputC) {
        // Make popoverTest2 come up here
        //ert("This is when popoverTest2 should fire");
        bootstrap.Popover.getOrCreateInstance('#popoverTest2').show()
    }
 }

Demo

CodePudding user response：

From the Bootstrap docs (note I'm linking the version 4.0 and not the 5.0 but this approach is working anyway):

https://getbootstrap.com/docs/4.0/components/popovers/#popovershow

$('#element').popover('show')

I just copied your same exact snippet, added jQuery and changed your alert so that the popover triggers instead:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

document.getElementById("button").addEventListener("click", testMe);

function testMe() {
  let inputA = parseFloat(document.getElementById("aInput").value);
  let inputB = parseFloat(document.getElementById("bInput").value);
  let inputC = parseFloat(document.getElementById("cInput").value);
  let popoverTest1 = document.getElementById("popoverTest1");
  let popoverTest2 = document.getElementById("popoverTest2");
  if (inputA === 0) {
    // Make popoverTest1 come up here
    //alert("This is when popoverTest1 should fire");    
    $('#popoverTest1').popover('show')
  } else if (inputB === inputC) {
    // Make popoverTest2 come up here
    //alert("This is when popoverTest2 should fire");
    $('#popoverTest2').popover('show');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<label for="aInput">A Input</label>
<input type="number" id="aInput">
<span id="popoverTest1" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="manual" data-bs-content="Top popover" data-bs-title="This is zero" data-bs-content="Change it to something non-zero">
</span>
<br><br>
<label for="bInput">B Input</label>
<input type="number" id="bInput">
<span id="popoverTest2" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="manual" data-bs-content="Top popover" data-bs-title="This is the same as Input C" data-bs-content="Change it so it's not the same as Input C">
</span>
<br> <br>
<label for="cInput">C Input</label>
<input type="number" id="cInput">

<button type="button"  id="button">Hit Me</button>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL jjXkk Q2h455rYXK/7HAuoJl 0I4" crossorigin="anonymous"></script>