CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
yaylitzis
yaylitzis

Reputation: 5534

Popover content is appearing in a different position

In the panel heading, I have inserted a link which is a popover and it is floated to the right (custom rule). The problem is that later the popover content is appearing at a different position.

I can add CSS rules to force popover appears next to the badge but I thought that this would be done automatically. So, the question is:

Am I have done something with a wrong way or because of the CSS rule .badge-panel-r the result I get is normal?

$('[data-toggle="popover"]').popover();
.badge-panel-r {
  float: right;
  font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <div class="panel panel-success">
        <div class="panel-heading">
          <i class="fa fa-check space5-right"></i> result
          <a href="#" data-toggle="popover" data-placement="right" data-content="counter"><span class="badge badge-panel-r">1</span></a>
        </div>
        <div class="panel-body" style="background-color:rgba(24, 188, 156, 0.09)">

          <p>text...</p>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 169

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362360

I think it would be better to use the custom badge-panel-r class on the link instead. The trigger link needs to float:right too.

<a href="#" data-toggle="popover" class="badge-panel-r" data-placement="right" data-content="counter"><span class="badge">1</span></a>

Demo

Upvotes: 0

neophyte
neophyte

Reputation: 6626

You have some problem in your mark-up. Use data-toggle="popover" data-placement="left" data-content="counter" with the span.

working snippet

$('[data-toggle="popover"]').popover();
.badge-panel-r {
  float: right;
  font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <div class="panel panel-success">
        <div class="panel-heading">
          <i class="fa fa-check space5-right"></i> result
          <a href="#" ><span data-toggle="popover" data-placement="left" data-content="counter" class="badge badge-panel-r">1</span></a>
        </div>
        <div class="panel-body" style="background-color:rgba(24, 188, 156, 0.09)">

          <p>text...</p>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions