Bootstrap 3 Popover avec html contenu

<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Bootstrap 3 Popover with html content</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="Bootstrap 3 Popover with html content">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
  <div class="pt-5">
    <h1>Bootstrap 3 Popover with html content</h1> 
	<p>Click the Icon to see the popover</p>
	<div class="popover-block-container">
	  <button tabindex="0" type="button" class="popover-icon" data-popover-content="#unique-id" data-toggle="popover" data-placement="bottom">
		<i class="fa fa-info-circle"> info</i>
	  </button>
	  <div id="unique-id" style="display:none;">
		<div class="popover-body text-center">
		  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis libero ipsum, imperdiet 
		  <a class="btn btn-sm btn-primary" href="https://www.nglesson.com/">Click</a>
		</div>
	  </div>
	</div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
body {
  padding: 20px;
  text-align: center;
}
.popover-icon {
	background: none;
	color: none;
	border: none;
	padding: 0;
	outline: none;
	cursor: pointer;
}
.popover-icon i {
	color: #000;
	text-align: center;
	margin-top:4px;
}
.popover-header {
   display: none;
}
.popover {
	max-width: 306.6px;
	border-radius: 6px;
	border: none;
	box-shadow: 0 0 6px 1px #eee;
}
.popover-body {
	border: none;
	padding: 20px 49.4px 24px 24px;
	color: #999;
	font-size: 15px;
	font-style: italic;
	z-index: 2;
	line-height: 1.53;
	letter-spacing: 0.1px;
}
.popover-close {
	position: absolute;
	top: 5px;
	right: 10px;
	opacity: 1;
}
.fa-info-circle {
	font-size: 16px;
	font-weight: bold;
	color: #000;
}
$(document).ready(function(){
    $("[data-toggle=popover]").popover({
        html : true,
        trigger: 'focus',
        content: function() {
            var content = $(this).attr("data-popover-content");
            return $(content).children(".popover-body").html();
        }
    });   
});
Timeline style05

Timeline style05

Timeline style01

Timeline style01

Texte Block Posts Style01

Texte Block Posts Style01

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Planète animée style01

Planète animée style01

Loading style water animation

Loading style water animation

Loading style book loader

Loading style book loader

Image hover 06

Image hover 06

Form Création de compte

Form Création de compte

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Card Bootstrap4 02

Card Bootstrap4 02