Bootstrap popover alignment issue on ios, safari device

Question

I have used bootstrap popover 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.

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.

<div id="hoverforlanguage"> 
  <span class="editbtnprofilea color5 nopadd padtop10 shwmobileedit" data-toggle="modal" data-target="#languagesmodal"><i class="fa fa-pencil fa-lg" aria-hidden="true"></i></span>
  <h4 class="control-label bold color2">Languages</h4>
  <hr class="hidden-print backgroundcolor2">
</div>

.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>.editbtnprofilea').popover({ 'placement':'right', html: 'true','content':'<button type="button" id="close" class="close" onclick="$(&quot;#hoverforlanguage>.editbtnprofilea&quot;).popover(&quot;hide&quot;);$(&quot;#hoverforlanguage&quot;).find(&quot;.editbtnprofilea&quot;).hide();">&times;</button><span style="float: left;">Add Languages </span>' }).popover('show').on('click',function(){ $(this).popover('hide'); 
  });
});

Answer 1

Well, depending on the results you are requesting here are a few solutions - I can only imagine they will work, without usable code can't test them.

a) Close button on top of the text:

.close {
  position:absolute;
  z-index:2
  top:10px;
  right:10px;
}

b) Text wrapping:

.popover {
  white-space:normal;
}
.close {
  float:right;
}
.popover span {
  float:none; // only writing this because you have float applied
}

c) Looks like on ios the font-size is slightly bigger, so you could also try:

.popover {
  font-size:0.8em; // Trial and error size
}