JSFiddle - React, Tailwind, and code Playground

by achal_arcane

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<p>Click on button to see Popover</p>

<button class="btn btn-primary btn-sm nav-button" data-count="0"
                data-placement="top" data-content="Previous content not available" id="example">Previous Day
        </button>

CSS

.popover{
                background:rgba(128, 21, 21,0.8);
                font-weight: bold;
                border-radius: 2%;
            }
.popover-body{
                background:rgba(128, 21, 21,0.8);
                color: #ffffff;
    }

JavaScript

$('#example').popover();