CODEWITHSUNDEEP
javascriptjqueryhtmlcss
adarsh
adarsh

Reputation: 142

Tooltip position apperance issue

I have Used Bootstrap here....My popover tootip position is not correct. As I want it to appear in the extreme right corner with the Glyphicon but it still appears at the left Position.

So, what I Tried earlier :

1) I just changed the CSS and tried to align the popover on the right but it did not work. 

	$("[data-toggle=popover]").popover({
    html: "true", 
	container: 'body',
	 title : 'Contact Us <a href="#" class="close" data-dismiss="alert">&times;</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 &nbsp;&nbsp;<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 &nbsp;&nbsp;<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:[email protected]?Subject=Help%20Client">[email protected]</a></p></p></div>
		  
        </div>
      </form>
	 
    </div>
  </ul>
</div>
</body>
</html>

Upvotes: 0

Views: 54

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13407

Add position: fixed on the anchor that opens the popup instead of the icon. Because popover is trying the align the popover relative to the anchor that opens it. And the position of the anchor is still at left as its not position: fixed to the right.

.phone_icon {
  position: fixed;
  top: 8px;
  right: 16px;
}

#call_icon.glyphicon.glyphicon-earphone {
  font-size: 30px;
}

Also changed the data-placement to left, as there is no space on right.

$("[data-toggle=popover]").popover({
  html: "true",
  container: 'body',
  title: 'Contact Us <a href="#" class="close" data-dismiss="alert">&times;</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;
}

.phone_icon {
  position: fixed;
  top: 8px;
  right: 16px;
}

#call_icon.glyphicon.glyphicon-earphone {
  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 class="phone_icon" data-placement="left" 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 &nbsp;&nbsp;<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 &nbsp;&nbsp;<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:[email protected]?Subject=Help%20Client">[email protected]</a></p>
                </p>
              </div>

            </div>
          </form>

        </div>
      </ul>
    </div>
  </body>

</html>

Upvotes: 2

Related Questions