<div aria-live="polite" aria-atomic="true" id="popover">

    <div class="toast" style="position: absolute; top: 0; right: 0;" data-autohide="false">

      <div class="toast-header">

        <svg class="rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"

          focusable="false" role="img">

          <rect fill="#007aff" width="100%" height="100%" /></svg>

        <strong class="mr-auto">Bootstrap</strong>

        <small>11 mins ago</small>

        <button type="button" class="ml-2 mb-1 close" id="btnClose" data-dismiss="toast" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="toast-body">

        Hello, world! This is a toast message.

      </div>

    </div>

  </div>

​

  <div class="container">

​

    <div class="row justify-content-center pt-5 mt-5">

      <div class="col-md-1">

        <button type="button" class="btn btn-primary" id="btnId">TL</button>

      </div>

      <div class="col-md-1">

        <button type="button" class="btn btn-primary" id="btnId2">T</button>

      </div>

      <div class="col-md-1">

        <button type="button" class="btn btn-primary" id="btnId3">TR</button>

      </div>

      <div class="col-md-1">

        <button type="button" class="btn btn-primary" id="btnId4">RT</button>

      </div>

      <div class="col-md-1">

        <button type="button" class="btn btn-primary" id="btnId5">R</button>

      </div>

      <div class="col-md-1">

        <button type="button" class="btn btn-primary" id="btnId6">RB</button>

      </div>

      <div class="col-md-1">

        <button type="button" class="btn btn-primary" id="btnId7">BR</button>

      </div>

      <div class="col-md-1">

        <button type="button" class="btn btn-primary" id="btnId8">B</button>

      </div>

      <div class="col-md-1">

        <button type="button" class="btn btn-primary" id="btnId9">BL</button>

      </div>

      <div class="col-md-1">

        <button type="button" class="btn btn-primary" id="btnId10">LB</button>

      </div>

      <div class="col-md-1">

        <button type="button" class="btn btn-primary" id="btnId11">L</button>

      </div>

      <div class="col-md-1">

        <button type="button" class="btn btn-primary" id="btnId12">LT</button>

      </div>

​

  </div>

​

const clearPopup = function(){

  //remove any properties you added to bring back default html look of popup

  $('.toast .toast-header svg rect').css('fill', '#007aff');

  $('.toast .toast-header small').removeClass('text-danger');

  $('.toast').removeClass('bg-danger');

  $('.toast').removeClass('animated bounceInLeft');

}

​

//clear style of popup on clicking close button in popup

$('#btnClose').click(clearPopup);

​

document.getElementById('btnId').addEventListener('click', function () {

      clearPopup(); //add if you want to be sure you are working with default look of popup

      $(".toast").css({"left":"10%","top":"0%"}); // classic position

      // now add your styling to 'toast' with Jq Selector and add properties

      $('.toast .toast-header svg rect').css('fill', '#ffffff'); // eddits color of rounded square

      $('.toast .toast-header small').addClass('text-danger'); //eddits color of time text in header 

      $('.toast').addClass('bg-danger'); //eddits background of popup

      // After showing notification add animation with classes

      $('.toast').addClass('animated bounceInLeft');

      $('.toast').toast('show');

      // Setting hide after 10s

      setTimeout(function () {

        clearPopup();

        $('.toast').toast('hide');

        }, 10000);

    });

​

    document.getElementById('btnId2').addEventListener('click', function () {

      clearPopup();

      $(".toast").css({"left":"40%","top":"0%"});

      $('.toast').toast('show');

    });

​

    document.getElementById('btnId3').addEventListener('click', function () {

      clearPopup();

      $(".toast").css({"left":"70%","top":"0%"});

      $('.toast').toast('show');

    });

​

    document.getElementById('btnId4').addEventListener('click', function () {

      clearPopup();

     $(".toast").css({"left":"85%","top":"10%"});

      $('.toast').toast('show');

    });

​

    document.getElementById('btnId5').addEventListener('click', function () {

      clearPopup();

      $(".toast").css({"left":"85%","top":"40%"});

      $('.toast').toast('show');

    });

​

    document.getElementById('btnId6').addEventListener('click', function () {

      clearPopup();

      $(".toast").css({"left":"85%","top":"80%"});

      $('.toast').toast('show');

    });

​

    document.getElementById('btnId7').addEventListener('click', function () {

      clearPopup();

      $(".toast").css({"left":"70%","top":"91%"});

      $('.toast').toast('show');

    });

    document.getElementById('btnId8').addEventListener('click', function () {

      clearPopup();

      $(".toast").css({"left":"40%","top":"91%"});

      $('.toast').toast('show');

    });

​

    document.getElementById('btnId9').addEventListener('click', function () {

      clearPopup();

      $(".toast").css({"left":"10%","top":"91%"});

      $('.toast').toast('show');

    });

​

    document.getElementById('btnId10').addEventListener('click', function () {

      clearPopup();

      $(".toast").css({"left":"0%","top":"80%"});

      $('.toast').toast('show');

    });

​

    document.getElementById('btnId11').addEventListener('click', function () {

      clearPopup();

      $(".toast").css({"left":"0%","top":"40%"});

      $('.toast').toast('show');

    });

​

    document.getElementById('btnId12').addEventListener('click', function () {

      clearPopup();

      $(".toast").css({"left":"0%","top":"10%"});

      $('.toast').toast('show');

    });