$('[data-toggle="popover6"]').popover({
html: true,
placement: 'bottom',
trigger: 'manual',
content: function() {
return $('#popover-card-content').html();
}
});
$(document).on('click', '[data-toggle="popover6"]', function() {
$(this).popover('toggle');
$('[data-toggle="popover7"]').popover({
html: true,
placement: 'bottom',
trigger: 'manual',
content: function() {
return $('#popover-card-wrapper2').html();
}
});
});
$(document).on('click', '[data-toggle="popover7"]', function() {
$(this).popover('toggle');
});
.optionc {
border-radius: 2px;
background: #e2e4e6;
-webkit-box-shadow: 0 1px 0 0 #c4c9cc;
box-shadow: 0 1px 0 0 #c4c9cc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
display: block;
height: 32px;
margin-top: 8px;
max-width: 300px;
overflow: hidden;
padding: 7px 7px 7px 11px;
position: relative;
text-decoration: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
}
.optionc:hover {
background-color: rgb(193, 193, 193);
color: white;
border: none;
box-shadow: 0 0 2px 0 #c4c9cc;
}
.popover-header {
position: relative;
text-align: center;
}
.pop-over-list li>a {
display: block;
font-weight: 700;
padding-top: 3px;
position: relative;
text-decoration: none;
width: 265px;
}
.popover {
width: 500px;
}
#searchlabel {
background: rgb(226, 228, 230);
border: 0;
border-radius: 3px;
-webkit-box-shadow: none;
box-shadow: none;
height: 30px;
margin-left: 0;
width: 250px;
padding-top: 8px;
;
overflow: hidden;
}
#searchlabel:focus {
box-sizing: border-box;
box-shadow: 0 0 2px 0 #0284c6;
background-color: white;
}
.label {
height: 80px;
width: 250px;
position: relative;
margin-top: 20px;
}
.label:hover {
background: rgb(226, 228, 230);
}
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<a href="blog/2015/08/jquery-bootstrap-icons.download.html" data-icon="download-alt"></a>
<body>
<div>
<a class="optionc" class="card1" title="Labels" tabindex="0" data-trigger="focus" data-toggle="popover6">
<span class="fa fa-tag"> </span>
<span>
<b style="color:rgb(68,68,68); font-size:15; padding-left:5px" >Labels</b>
</span>
</a>
</div>
<div id="popover-card-content">
<textarea id="searchlabel" placeholder="Search Labels..."></textarea>
<ul style="margin-bottom:20px; padding:0; list-style: none;" class="pop-over-list">
<li class="hover1">
</li>
</ul>
<div class="label" style="font-size:12px;"><a title="Create Label" tabindex="0" data-trigger="focus" data-toggle="popover7">Create new Label</a></div>
<hr>
<div class="label" style="font-size:12px"><a>Enable color blind friendly mode</a></div>
</div>
<div id="popover-card-content1">
<b>Name</b>
<textarea id="searchlabel"></textarea>
<b>Select a color</b>
<span style="background-color:rgb(97,189,79); width:50px; height:30px; margin-right:3px; border-radius:3px;"></span>
</div>
</body>