Tooltips & Popovers

Copy
<divclass="container"><divclass="row py-7 text-center"><div><buttontype="button"class="btn bg-gradient-secondary"data-bs-container="body"data-bs-toggle="popover"data-bs-placement="top"data-bs-content="That’s the main thing people are controlled by! Thoughts- their perception of themselves!">
        Popover on top
      </button><buttontype="button"class="btn bg-gradient-secondary"data-bs-container="body"data-bs-toggle="popover"data-bs-placement="right"data-bs-content="We’re not always in the position that we want to be at.">
        Popover on right
      </button><buttontype="button"class="btn bg-gradient-secondary"data-bs-container="body"title="Popover with title"data-bs-toggle="popover"data-bs-placement="bottom"data-bs-content="A lot of people don’t appreciate the moment until it’s passed.">
        Popover on bottom
      </button><buttontype="button"class="btn bg-gradient-secondary"data-bs-container="body"data-bs-toggle="popover"data-bs-placement="left"data-bs-content="It really matters and then like it really doesn’t matter. What matters is the people who are sparked by it.">
        Popover on left
      </button></div></div></div><!-- initialization script --><script>varpopoverTriggerList=[].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))varpopoverList=popoverTriggerList.map(function(popoverTriggerEl){returnnewbootstrap.Popover(popoverTriggerEl)})</script>
Copy
<divclass="container"><divclass="row py-8 text-center"><div><buttontype="button"class="btn bg-gradient-secondary"data-bs-toggle="tooltip"data-bs-placement="top"title="Tooltip on top">
        Tooltip on top
      </button><buttontype="button"class="btn bg-gradient-secondary"data-bs-toggle="tooltip"data-bs-placement="right"title="Tooltip on right">
        Tooltip on right
      </button><buttontype="button"class="btn bg-gradient-secondary"data-bs-toggle="tooltip"data-bs-placement="bottom"title="Tooltip on bottom">
        Tooltip on bottom
      </button><buttontype="button"class="btn bg-gradient-secondary"data-bs-toggle="tooltip"data-bs-placement="left"title="Tooltip on left">
        Tooltip on left
      </button></div></div></div><!-- initialization script --><script>vartooltipTriggerList=[].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))vartooltipList=tooltipTriggerList.map(function(tooltipTriggerEl){returnnewbootstrap.Tooltip(tooltipTriggerEl)})</script>