CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
Andurit
Andurit

Reputation: 5762

Bootstrap popover style

is there a way how to style the popover window from boostrap?
DEMO below:

<body>
<script> $(function () { $('[data-toggle="popover"]').popover() }) </script>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="This should be styled">Button</button>
</body>

http://fiddle.jshell.net/97tmrqf0/1/

What I want to do: make that popup window have this HTML:

<div class="col-sm-3 col-md-3">
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <span data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close">
            </span>Výbava vozidla</span>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
        <ul class="list-group">
          <li class="list-group-item"><span class="glyphicon glyphicon-ok text-success"></span>LOKÁTOR/KAMERA</li>
          <li class="list-group-item"><span class="glyphicon glyphicon-ok text-success"></span>SPORTOVNÍ SEDADLA</li>
          <li class="list-group-item"><span class="glyphicon glyphicon-ok text-success"></span>ALARM</li>
          <li class="list-group-item"><span class="glyphicon glyphicon-ok text-success"></span>UPEVN DĚT-SEDAČKY</li>
          <li class="list-group-item"><span class="glyphicon glyphicon-ok text-success"></span>TAŽNÉ ZAŘÍZENÍ ODNÍM</li>
          <li class="list-group-item"><span class="glyphicon glyphicon-ok text-success"></span>SPORTOVNÍ DIFERENC</li>
          <li class="list-group-item"><span class="glyphicon glyphicon-ok text-success"></span>DISKY 8,5 J X 18 ALU</li>
        </ul>
      </div>
    </div>                        
  </div>
</div>

Upvotes: 2

Views: 6090

Answers (2)

Swapnil Motewar
Swapnil Motewar

Reputation: 1088

add these css to change style of popover, this is sample

h3.popover-title {
color: green;
background: yellow;
}
.popover-content {
color: blue;
background: green;
font-size: 11px;
}

http://fiddle.jshell.net/97tmrqf0/2/

Upvotes: 1

dan
dan

Reputation: 2388

The default template for a popover is:

<div class="popover" role="tooltip">
    <div class="arrow"></div>
    <h3 class="popover-title"></h3>
    <div class="popover-content"></div>
</div>

So you can just add some CSS that targets these elements.

Source: http://getbootstrap.com/javascript/#popovers

Upvotes: 5

Related Questions