Incorporated Bootstrap to enhance the design....The popover tooltip positioning is not behaving as expected. I want it to display in the far right corner with the Glyphicon, but it keeps appearing on the left.
What I attempted previously:
1) I modified the CSS to try and align the popover to the right, yet it didn't yield the desired results.
$("[data-toggle=popover]").popover({
html: "true",
container: 'body',
title : 'Contact Us <a href="#" class="close" data-dismiss="alert">×</a>',
content: function() {
return $('#popover-content').html();
}
});
$(document).on("click", ".popover .close" , function(){
$(this).parents(".popover").popover('hide');
});.form-control {width:120px;}
.popover {
max-width:300px;}
#contact_query.btn.btn-primary
{
background-color:#74a5d0;
}
#call_icon.glyphicon.glyphicon-earphone {
position: fixed;
top: 8px;
right: 16px;
font-size: 30px;
}
@media (max-width: 767px) {
#contact_query.btn.btn-primary
{
font-size:13px;
}
#query-pos
{
font-size:13px;
}
#email-pos
{
font-size:13px;
}
#ph_1,#ph_2
{
font-size:13px;
}
}<!DOCTYPE html>
<html>
<head>
<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/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<ul class="list-unstyled">
<li><a data-placement="right" data-toggle="popover" data-title="" data-container="body" type="button" data-html="true" href="#contact" id="login_try"><span id="call_icon" class="glyphicon glyphicon-earphone"></span></a></li>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<div class="row">
<div class="col-xs-12" ><div>123123121231 <a id="ph_1" href="tel:+9112313313123" type="submit" class="btn btn-primary" ><span class="glyphicon glyphicon-earphone"></span></a></div><br/></div>
<div class="col-xs-12" ><div>1231231223 <a id="ph_2" href="tel:+91121312312" type="submit" class="btn btn-primary" ><span class="glyphicon glyphicon-earphone"></span></a></div></div>
</div><hr>
<div class="row">
<div class="col-xs-12"><p><b>Unable to Contact us? </b><br/>
<p id="query-pos"><a id="contact_query" href="#" class="btn btn-primary">Send your Query</a> and our team will get back to you at the earliest.</p></p></div></div>
<div ><hr><p><b>Or you can</b><br/><p id="email-pos">E-mail us @ <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89ecf1e8e4f9e5ecc9ecf1e8e4f9e5eca7eae6e4">[email protected]</a>?Subject=Help%20Client"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bdd8c5dcd0cdd1d8fdd8c5dcd0cdd1d893ded2d0">[emailprotected]</a></a></p></p></div>
</div>
</form>
</div>
</ul>
</div>
</body>
</html>