Skip to content

Instantly share code, notes, and snippets.

@Mgregchi
Created October 2, 2021 10:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Mgregchi/40518de2e946c585dad877b485fcaba7 to your computer and use it in GitHub Desktop.
Save Mgregchi/40518de2e946c585dad877b485fcaba7 to your computer and use it in GitHub Desktop.
Html contents inside a bootstrap 5 popover
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(function() {
var options = {
html: true,
title: "Optional: HELLO(Will overide the default-the inline title)",
//html element
content: $("#popover-content")
//Doing below won't work. Shows title only
//content: $("#popover-content").html()
}
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
})
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="popover-content">
<div class="input-group">
<input type="text" class="form-control form-control-sm" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-danger" type="submit">
<i class="bi bi-search"></i>
</button>
</div>
</div>
<div class="col-sm-8"></div>
<button class="btn btn-success m-3">Button</button>
<input type="submit" class="btn btn-danger" placeholder="Button red">
</div>
<a id="example" tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" title="Default: Html inside popover" data-bs-content="And here's some amazing content. It's very engaging. Right? This is default, but Can be empty">Html inside popover</a>
<!-- end snippet -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment