title: Bootstrap popover alignment issue on ios, safari device
body: <p>I have used <a href="https://getbootstrap.com/docs/3.3/javascript/#popovers" rel="nofollow noreferrer">bootstrap popover</a> to display a hint message to the user.
  It is working fine for windows, android devices. But the content takes to the second row for ios and safari device. Please check the image and try to help me. I have tried so many ways to change the CSS but couldn't solve the issue.</p>
  
  <p>There is multiple popover on the page. If a user wants to close, then they have to click the close button for each and every popover. That's the requirement. Thatswhy I added the close button using javascript.</p>
  
  <pre><code>&lt;div id="hoverforlanguage"&gt; 
    &lt;span class="editbtnprofilea color5 nopadd padtop10 shwmobileedit" data-toggle="modal" data-target="#languagesmodal"&gt;&lt;i class="fa fa-pencil fa-lg" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
    &lt;h4 class="control-label bold color2"&gt;Languages&lt;/h4&gt;
    &lt;hr class="hidden-print backgroundcolor2"&gt;
  &lt;/div&gt;
  
  .popover-content{
    font-family: 'Caveat', cursive;
    font-weight: bold;
    font-size: large;
    padding: 0px 5px;
  }
  .button.close{
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0
  }
  .close{
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2
  }
  
  $(document).ready(function() {
    $('#hoverforlanguage&gt;.editbtnprofilea').popover({ 'placement':'right', html: 'true','content':'&lt;button type="button" id="close" class="close" onclick="$(&amp;quot;#hoverforlanguage&gt;.editbtnprofilea&amp;quot;).popover(&amp;quot;hide&amp;quot;);$(&amp;quot;#hoverforlanguage&amp;quot;).find(&amp;quot;.editbtnprofilea&amp;quot;).hide();"&gt;&amp;times;&lt;/button&gt;&lt;span style="float: left;"&gt;Add Languages &lt;/span&gt;' }).popover('show').on('click',function(){ $(this).popover('hide'); 
    });
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/p0whH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p0whH.png" alt="enter image description here"></a></p>