JSFiddle - React, Tailwind, and code Playground

by LabibMuhammadJamal

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.3/cerulean/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Popover #1 -->
        <a class="text-dark phone-num" data-placement="bottom" data-popover-content="#click-to-call" data-toggle="popover" data-container="body">+1 123 456 789</a>

        <!-- Content for Popover #1 -->
        <div class="popover d-none" id="click-to-call">
          <div class="popover-body">
            <div class="container-fluid text-center px-0">
              <div class="row">
                <div class="col-md-12">
                  <button class="btn btn-block btn-primary">CALL NOW</button>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 py-3"><strong class="text-secondary">OR</strong></div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <div class="form">
                    <div class="form-group">
                      <input type="" name="" class="form-control" placeholder="Full Name">
                    </div>
                    <div class="form-group">
                      <input type="" name="" class="form-control" placeholder="Phone Number">
                    </div>
                    <div class="form-group mb-0">
                      <button class="btn btn-block btn-primary">REQUEST CALL BACK</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

JavaScript

$('[data-toggle="popover"],[data-original-title]').popover({
    html: true,
    content: function() {
        var content = $(this).attr("data-popover-content");
        return $(content).children(".popover-body").html();
    }
});

$(document).on('click', function(e) {
    $('[data-toggle="popover"],[data-original-title]').each(function() {
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide')
        }
    });
});