There is a pop-up window (bootstrap), the phone number in the title, in the content part of the icon-link on the social network (Font Avesome).

How to change the width of the window, so that the content in the title and content was placed in one line without being transferred and centered?

<div class="btn-group btn-group-sm pull-right menu"> <a href="#" class="btn active">регистрация</a> <a href="#" class="btn active"> <i class="fa fa-sign-in" aria-hidden="true"></i> вход </a> <a class="btn active" tabindex="0" data-toggle="popover" title="(XXX)-XXX-XX-XX" data-content="<div class='container-fluid'> <a href='http://vk.com/'> <span class='fa-stack fa-2x'> <i class='fa fa-circle-thin fa-stack-2x' style='color: #adadad'></i> <i class='fa fa-vk fa-stack-1x' aria-hidden='true' style='color: blue;'></i> </span> </a> <a href='https://ok.ru/'> <span class='fa-stack fa-2x'> <i class='fa fa-circle-thin fa-stack-2x' style='color: #adadad'></i> <i class='fa fa-odnoklassniki fa-stack-1x' aria-hidden='true' style='color: orangered;'></i> </span></a></div>" data-delay="180">контакты</a> </div>

enter image description here

  • Add code to jsfiddle to clearly see why this is happening - Karalahti
  • Add to the question the script that you use for the popover. - Gleb Kemarsky 10:07 pm

1 answer 1

Once the code on your site works, then you use a javascript that you did not add to your question. Judging by the picture, your script has already set the parameters html : true and placement : 'bottom' .

Try writing styles for a popover (as a neighbor to the link that calls it):

  1. we prohibit transfer to the next line;
  2. center the contents of the line;
  3. after 1. and 2. the right edge goes off the screen, you need to pull it out.

 $('#btn-contacts').popover({ html : true, placement : 'bottom' }); 
 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'); #btn-contacts + .popover>.popover-content, #btn-contacts + .popover>.popover-title { white-space: nowrap; /* 1. */ text-align: center; /* 2. */ } #btn-contacts + .popover { right: 0; /* 3. */ } 
 <div class="btn-group btn-group-sm pull-right menu"> <a href="#" class="btn active">регистрация</a> <a href="#" class="btn active"> <i class="fa fa-sign-in" aria-hidden="true"></i> вход </a> <a id="btn-contacts" class="btn active" tabindex="0" data-toggle="popover" title="(XXX)-XXX-XX-XX" data-content="<a href='http://vk.com/'> <span class='fa-stack fa-2x'> <i class='fa fa-circle-thin fa-stack-2x' style='color: #adadad'></i> <i class='fa fa-vk fa-stack-1x' aria-hidden='true' style='color: blue;'></i> </span> </a> <a href='https://ok.ru/'> <span class='fa-stack fa-2x'> <i class='fa fa-circle-thin fa-stack-2x' style='color: #adadad'></i> <i class='fa fa-odnoklassniki fa-stack-1x' aria-hidden='true' style='color: orangered;'></i> </span></a>" data-delay="180">контакты</a> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>