时间戳

首页 > 解决方案 > 工具提示位置外观问题

javascript - 工具提示位置外观问题

问题描述

我在这里使用了 Bootstrap ......我的弹出框提示位置不正确。因为我希望它与 Glyphicon 一起出现在最右角，但它仍然出现在左侧位置。

所以，我之前尝试过的：

1）我刚刚更改了 CSS 并尝试在右侧对齐弹出框，但它不起作用。

	$("[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:example@example.com?Subject=Help%20Client">example@example.com</a></p></p></div>
		  
        </div>
      </form>
	 
    </div>
  </ul>
</div>
</body>
</html>

标签： javascriptjqueryhtmlcss

解决方案

添加position: fixed打开弹出窗口而不是图标的锚点。因为 popover 正在尝试将 popover 相对于打开它的锚对齐。并且锚的位置仍然在左侧，而不是position: fixed在右侧。

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

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

还将数据放置更改为左侧，因为右侧没有空间。

$("[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:example@example.com?Subject=Help%20Client">example@example.com</a></p>
                </p>
              </div>

            </div>
          </form>

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

</html>

推荐阅读