Bootstrap 3 Öğretimi Bölüm 5

 Önceki Bölümler :

• Bölüm 1
• Bölüm 2 
• Bölüm 3 
• Bölüm 4 

Bootstrap Input Boyutlar

Formlarda Input Boyutlandırma

Input elemanının yüksekliğini .input-lg ve .input-sm sınıfları ile değiştirebilirsiniz.

Elemanların genişliklerini ise .col-lg-* veya .col-sm-* grid sütun genişlik sınıfları kullanarak belirlersiniz.

<form>

  <div class="form-group">

    <label for="inputsm">Küçük input</label>

    <input class="form-control input-sm" id="inputsm" type="text">

  </div>

   <div class="form-group">

    <label for="inputdefault">Default input</label>

    <input class="form-control" id="inputdefault" type="text">

  </div>

  <div class="form-group">

    <label for="inputlg">Büyük input</label>

    <input class="form-control input-lg" id="inputlg" type="text">

  </div>

</form>

Küçük input

Default input

Büyük input

Bir form grubu içindeki kontrol eleman boyutlarını direk <div class="form-group"> elemanına .form-group-* sınıfı kullanarak değiştirebilirsiniz.

<form>

  <div class="form-group form-group-sm">

    <label for="inputsm">Küçük input</label>

    <input class="form-control" id="inputsm" type="text">

  </div>

   <div class="form-group">

    <label for="inputdefault">Default input</label>

    <input class="form-control" id="inputdefault" type="text">

  </div>

  <div class="form-group form-group-lg">

    <label for="inputlg">Büyük input</label>

    <input class="form-control" id="inputlg" type="text">

  </div>

</form>

Küçük input

Default input

Büyük input

Bir input grubunun da boyutunu .input-group-sm ya da .input-group-lg sınıfı ekleyerek değiştirebilirsiniz.

  <form>

    <div class="input-group input-group-lg">

      <input type="text" class="form-control" placeholder="Search">

      <div class="input-group-btn">

        <button class="btn btn-default" type="submit"><i

class="glyphicon glyphicon-search"></i></button>

      </div>

    </div><br>

    <div class="input-group input-group-sm">

      <input type="text" class="form-control" placeholder="Search">

      <div class="input-group-btn">

        <button class="btn btn-default" type="submit"><i

class="glyphicon glyphicon-search"></i></button>

      </div>

    </div>

  </form>

Sütun Genişlikleri ile Ayarlamak

Aşağıdaki örnekte .col-xs-* genişlik sınıflarını kullanan input elemanları gösteriliyor.

<div class="form-group row">

  <div class="col-xs-2">

    <label for="ex1">col-xs-2</label>

    <input class="form-control" id="ex1" type="text">

  </div>

  <div class="col-xs-3">

    <label for="ex2">col-xs-3</label>

    <input class="form-control" id="ex2" type="text">

  </div>

  <div class="col-xs-4">

    <label for="ex3">col-xs-4</label>

    <input class="form-control" id="ex3" type="text">

  </div>

</div>

col-xs-2

col-xs-3

col-xs-4

Yardım Yazısı

.help-block sınıfı kullanarak formlarda alanlar için açıklayıcı yazılar eklenebilir.

  <form>

    <div class="form-group">

      <label for="pwd">Şifre:</label>

      <input type="password" class="form-control" id="pwd" placeholder="Şifre giriniz">

      <span class="help-block">Bu yeni satır olarak eklenen bir yardım yazısı.

        Birden çok satırdan oluşabilir.</span>

    </div>

    <button type="submit" class="btn btn-default">Gönder </button>

  </form>

Şifre: Bu yeni satır olarak eklenen bir yardım yazısı. Birden çok satırdan oluşabilir.

Bootstrap Medya Nesneleri

Bootstrap video , resim gibi medya nesnelerinin görünümlerini ayarlamak için kolaylıklar sağlar. Bunlar mesela yorumları yayınlarken ya da tweetleri yayınlarken kullanılabilir.

Temel Media Nesnesi

<!-- Sola yanaşık -->

<div class="media">

  <div class="media-left">

    <img src="img_avatar1.png" class="media-object" style="width:60px">

  </div>

  <div class="media-body">

    <h4 class="media-heading">John Doe</h4>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,

        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

  </div>

</div>

<!-- Sağa yanaşık -->

<div class="media">

  <div class="media-body">

    <h4 class="media-heading">John Doe</h4>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,

        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

  </div>

  <div class="media-right">

    <img src="img_avatar1.png" class="media-object" style="width:60px">

  </div>

</div>

John Doe

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

---

John Doe

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Açıklarsak, öncelikle tüm medya parçalarını içinde barındıracak .media sınıfı bir <div> elemanı oluşturulur. Medya nesnesini (burada resim) sola hizalı yerleştirmek için .media-left sınıfı , sağa hizalı yerleştirmek için .media-right sınıfı verilir. Resmin yanında yer alacak olan yazı .media-body sınıfı bir bölme içine konur. Ayrıca başlık olacaksa o da .media-heading sınıfı olmalıdır.

Resmi Üste, Ortaya ya da Aşağıya Hizalamak

Medya nesnelerini .media-top, .media-middle ve .media-bottom sınıflarını kullanarak yazıya göre pozisyonlayabilirsiniz.

<!-- Media top -->

<div class="media">

  <div class="media-left media-top">

    <img src="img_avatar1.png" class="media-object" style="width:60px">

  </div>

  <div class="media-body">

    <h4 class="media-heading">Media Top</h4>

    <p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p>

  </div>

</div>

<!-- Media middle -->

<div class="media">

  <div class="media-left media-middle">

    <img src="img_avatar1.png" class="media-object" style="width:60px">

  </div>

  <div class="media-body">

    <h4 class="media-heading">Media Middle</h4>

    <p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p>

  </div>

</div>

<!-- Media bottom -->

<div class="media">

  <div class="media-left media-bottom">

    <img src="img_avatar1.png" class="media-object" style="width:60px">

  </div>

  <div class="media-body">

    <h4 class="media-heading">Media Bottom</h4>

    <p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p>

  </div>

</div>

Media Top

Lorem ipsum...

Lorem ipsum...

Lorem ipsum...

Media Middle

Lorem ipsum...

Lorem ipsum...

Lorem ipsum...

Media Bottom

Lorem ipsum...

Lorem ipsum...

Lorem ipsum...

İç İçe Medya Nesneleri

Örnek olarak yorumları ve onlara yapılan yorumları gösterirken medya nesnelerinin birini diğerinin içine yerleştirerek gösterebilirsiniz.

  <div class="media">

    <div class="media-left">

      <img src="img_avatar1.png" class="media-object" style="width:45px">

    </div>

    <div class="media-body">

      <h4 class="media-heading">John Doe <small>

<i>Posted on February 19, 2016</i></small></h4>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

     

      <!-- Nested media object -->

      <div class="media">

        <div class="media-left">

          <img src="img_avatar2.png" class="media-object" style="width:45px">

        </div>

        <div class="media-body">

          <h4 class="media-heading">John Doe <small>

<i>Posted on February 19, 2016</i></small></h4>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

          <!-- Nested media object -->

          <div class="media">

            <div class="media-left">

              <img src="img_avatar3.png" class="media-object" style="width:45px">

            </div>

            <div class="media-body">

              <h4 class="media-heading">John Doe <small>

<i>Posted on February 19, 2016</i></small></h4>

              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

            </div>

          </div>

         

        </div>

      </div>

     

    </div>

  </div>

John Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

John Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

John Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Daha Karmaşık Bir Örnek

<div class="media">

    <div class="media-left">

        <img src="img_avatar1.png" class="media-object" style="width:45px">

    </div>

    <div class="media-body">

        <h4 class="media-heading">John Doe <small>

<i>Posted on February 19, 2016</i></small></h4>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

     

        <!-- Nested media object -->

        <div class="media">

            <div class="media-left">

                <img src="img_avatar2.png" class="media-object" style="width:45px">

            </div>

            <div class="media-body">

                <h4 class="media-heading">John Doe <small>

<i>Posted on February 19, 2016</i></small></h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

                <!-- Nested media object -->

                <div class="media">

                    <div class="media-left">

                        <img src="img_avatar3.png" class="media-object"

style="width:45px">

                    </div>

                    <div class="media-body">

                        <h4 class="media-heading">John Doe <small>

<i>Posted on February 19, 2016</i></small></h4>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua.</p>

                    </div>

                </div>

            </div>

        </div>

        <!-- Nested media object -->

        <div class="media">

            <div class="media-left">

                <img src="img_avatar4.png" class="media-object" style="width:45px">

            </div>

            <div class="media-body">

                <h4 class="media-heading">Jane Doe <small>

<i>Posted on February 20, 2016</i></small></h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

            </div>

        </div>

       

    </div>

</div>

<div class="media">

    <div class="media-left">

        <img src="img_avatar5.png" class="media-object" style="width:45px">

    </div>

    <div class="media-body">

        <h4 class="media-heading">Jane Doe <small>

<i>Posted on February 19, 2016</i></small></h4>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    </div>

</div>

John Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

John Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

John Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Jane Doe Posted on February 20, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Jane Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Bootstrap Carousel

Carousel sınıflarını kullanarak sayfalarımızda otomatik olarak kayan görüntüler oluşturabiliriz.

<div id="myCarousel" class="carousel slide" data-ride="carousel">

  <!-- Aşağıdaki göstergeler -->

  <ol class="carousel-indicators">

    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

    <li data-target="#myCarousel" data-slide-to="1"></li>

    <li data-target="#myCarousel" data-slide-to="2"></li>

  </ol>

  <!-- Slide'ları kapsayan div elemanı -->

  <div class="carousel-inner">

    <div class="item active">

      <img src="la.jpg" alt="Los Angeles">

    </div>

    <div class="item">

      <img src="chicago.jpg" alt="Chicago">

    </div>

    <div class="item">

      <img src="ny.jpg" alt="New York">

    </div>

  </div>

  <!-- Sol ve sağdaki oklar -->

  <a class="left carousel-control" href="#myCarousel" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left"></span>

    <span class="sr-only">Previous</span>

  </a>

  <a class="right carousel-control" href="#myCarousel" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right"></span>

    <span class="sr-only">Next</span>

  </a>

</div>

Previous Next

Açıklarsak. 

En dıştaki <div> :

Carousel , işlevlerinin düzgün çalışması için id adı belli bir bölümde yerleştirilmelidir. Örnekte bu id="myCarousel" olan <div> elemanıdır. Daha sonra bu id değeri javascript işlevlerin çalışması için hedef gösteriliyor. 

class="carousel" sınıfı bu <div> elemanının içinde bir carousel barındırdığını ifade ediyor, javascript bu sayede bu bölümde animasyon yapacağını anlıyor. 

.slide sınıfı ekleyerek geçişlerde CSS geçiş ve animasyon efektleri olması sağlanıyor. Kayan bir efekt istemzseniz bu sınıfı eklemeyin, resimler direk değişecektir. 

data-ride="carousel" özellik değeri ise bootstrap'ın sayfa yüklenince otomatik olarak animasyonlara başlaması içindir.

Aşağıdaki göstergeler :

Göstergeler slide'ların alt tarafında yer alan küçük yuvarlaklardır. (Kaç tane slide resim olduğunu ve şu anda kaçıncının gösterildiğini belirtirler)

Göstergeler .carousel-indicators sınıfında bir <ol> listesi içinde belirtilir. 

data-target özelliği göstergelerin bağlı olduğu carousel bölümüne verdiğimiz id değeri olmalıdır. (burada data-target="#myCarousel")

data-slide-to özelliği ise o göstergeye tıklandığında kaçıncı resime gidileceğini belirtir. İlk resim sıfır numaradır.

Slide'ları kapsayan <div> elemanı :

Slide resimleri .carousel-inner sınıfı bir <div> elemanı içine konur.

Her slide ayrı ayrı .item sınıfı bir <div> içine konur. Burada yazılar ya da resimler olabilir.

En az bir slide bölümüne .active sınıfı verilmelidir, yoksa carousel görünmez. Genelde ilk slide ve ilk gösterge aktif yapılır.

Sağ ve soldaki oklar:

Bu kısımdaki kod, sağ ve sol tarafa kullanıcının slide'lar arasında isteğine göre gezinmesi için ileri-geri okları yerleştirir.

Bunlar glyphicon kullanan linklerdir. data-slide özelliğine sadece prev ya da next değeri verilebilir ve bunlar okun işlevini belirler. 

Slide'lara Başlık Yazıları Eklemek

Her slide'a ait <div class="item"> bölümüne bir <div class="carousel-caption"> bölümü ekleyerek slide'lar üzerine başlık yazıları eklenebilir.

    <div class="col-md-8">

....

  <!-- Slide'ları kapsayan div elemanı -->

  <div class="carousel-inner">

    <div class="item active">

      <img src="la.jpg" alt="Los Angeles">

      <div class="carousel-caption">

        <h3>Los Angeles</h3>

        <p>LA is always so much fun!</p>

      </div>

    </div>

....

Los Angeles

LA is always so much fun!

Chicago

Thank you, Chicago!

New York

We love the Big Apple!

Previous Next

Bootstrap Modal

Bu da JavaScript özelliklerden birisidir. Bulunulan sayfanın üst yarısında bir diyalog penceresi göstermek için kullanılır. 

Temel Modal Pencere

<!-- modal pencereyi açmak için bir buton -->

<button type="button" class="btn btn-info btn-lg" data-toggle="modal"

data-target="#myModal">Modal Aç</button>

<!-- Modal -->

<div id="myModal" class="modal fade" role="dialog">

  <div class="modal-dialog">

    <!-- Modal içeriği-->

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal">&times;</button>

        <h4 class="modal-title">Modal Başlığı</h4>

      </div>

      <div class="modal-body">

        <p>Modal içinde bazı yazılar..</p>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default"

data-dismiss="modal">Kapat</button>

      </div>

    </div>

  </div>

</div>

Modal Başlığı

Modal içinde bazı yazılar..

Açıklaması.

Tetikleyici bölüm :

Modal pencereyi kullanıcı bir butona ya da linke tıklayınca açarsınız. Burada bir buton kondu. Bu tetikleyici elemanın iki data-* özelliği var:

• data-toggle="modal" özelliği bir modal pencere açılacağını belirtir.
• data-target="#myModal" özelliği ise açılacak modal penceresini tarif ettiğimiz bölümün id değeridir.

Modal bölümü :

Modal'ı kapsayan <div> elemanı daha önce modalı tetiklemesi için koyduğumuz buton ya da linkin data-target özelliğinde verilen değer ile aynı bir id değerine sahip olmalıdır (burada #myModal)

.modal sınıfı bu bölümün bir modal olduğunu belirtir ve tetiklenince odağı ona verir. 

.fade sınıfı modal penceresi açılırken ya da kapanırken bir fade efekt sağlar, istemiyorsanız bu değeri kullanmayabilirsiniz.

role="dialog" özelliği ekran okuyucu kullanan kullanıcılara kolaylık sağlamak içindir.

İçteki .modal-dialog sınıfı bölüm görünümün sağlıklı boyutlarda olmasını sağlar.

Modal içeriği bölümü :

.modal-content sınıfındaki <div> elemanı modal pencerenin stilini belirler (sınır çizgileri, arkaplan , boşluklar vs.). Bu <div> elemanı içine modal pencere için header, content ve footer bölümleri konur.

.modal-header sınıfı header bölümünün stilini belirler. Header içindeki <button> elemanı data-dismiss="modal" özelliği ile kendisine tıklanınca modal pencerenin kapatılacağını belirtir. .close sınıfı kapatma butonunun stilini belirler ve sağ üst köşeye yerleştirir. .modal-title sınıfı ise başlığın uygun yükseklikte olmasını sağlar.

.modal-body sınıfı bölüm içine pencerede göstermek istediğimiz HTML elemanları koyarız. Bunlar yazı, resim, video vs. olabilir.

.modal-footer sınıfı bölüm footer kısmının stilini belirler. Bu kısmın default yerleşimi sağa dayalı olduğu için içine koyduğumuz <button> elemanı sağ alt köşede görünür.

Modal Pencere Boyutu

Pencere boyutunu daha küçük yapmak için .modal-sm sınıfı , büyük olması için .modal-lg sınıfı eklenir. 

Bu sınıf eklemesi .modal-dialog sınıfı <div> elemanına eklenir.

  <div class="modal-dialog modal-sm">

ya da 

  <div class="modal-dialog modal-lg">

gibi.

Not: Default olarak modal pencereler orta boydadır.

Bootstrap Tooltip

Tooltip , kullanıcı mouse'u bir elemanın üzerinde gezdirirken görünmesini istediğimiz ipucu amaçlı kısa bildiri popup yazılarıdır. 

Tooltip Nasıl Yapılır

Bir elemana data-toggle="tooltip" özelliği ekleyerek bir tooltip değerine sahip olduğu belirtilir. Tooltip içindeki yazıyı belirtmek içinse title özelliği kullanılır. 

<a href="#" data-toggle="tooltip" title="Heey!..!">Üzerimde gezin</a>

Üzerimde gezin

Tooltip özelliğinin sağlıklı çalışması için JQuery ile bir script kullanarak aktif edilmesi gerekir.

<a href="#" data-toggle="tooltip" data-placement="right"

title="Heey!..!">Üzerimde gezin</a>

<script>

$(document).ready(function(){

  $('[data-toggle="tooltip"]').tooltip();

});

</script>

Tooltip kullandığınız her sayfada en alta bu script'i eklemelisiniz.

Tooltip Pozisyonu

Elemanın data-placement özelliğine top, bottom, left, right değerlerini vererek sırayla üst, alt, sol ve sağda görünmeleri sağlanır. 

<a href="#" data-toggle="tooltip" data-placement="top"

title="Heey!..!">Üzerimde gezin</a> -

<a href="#" data-toggle="tooltip" data-placement="bottom"

title="Heey!..!">Üzerimde gezin</a> -

<a href="#" data-toggle="tooltip" data-placement="left"

title="Heey!..!">Üzerimde gezin</a> -

<a href="#" data-toggle="tooltip" data-placement="right"

title="Heey!..!">Üzerimde gezin</a>

<script>

$(document).ready(function(){

  $('[data-toggle="tooltip"]').tooltip();

});

</script>

Üzerimde gezin - Üzerimde gezin - Üzerimde gezin - Üzerimde gezin

Not : Eğer data-placement özelliğine auto eklerseniz tarayıcının yerleşimi otomatik kontrol etmesini sağlarsınız. Mesela "auto left" değer verirseniz eğer mümkünse solda yerleşir ama mümkün değilse başka bir yerde gösterilir.

Bootstrap Popover

Popover aslında tooltip'e benzer ama elemana tıklanınca çalışır ve bu şekilde daha fazla içerik gösterilebilir.

Popover Nasıl Yapılır

Popover oluşturmak için data-toggle="popover" özelliğine sahip bir eleman konur.

title özelliği ile popover'ın header kısmındaki yazı belirtilir, data-content özelliği ile de popover içeriğinde görünecek yazı belirtilir.

<a href="#" data-toggle="popover" title="Popover Başlık"

   data-content="Popover içinde bir yazı">Popover için tıkla</a>

Not : Popover için de JQuery ile başlatma scriptini sayfaya eklemek gerekir.

<a href="#" data-toggle="popover" title="Popover Başlık"

   data-content="Popover içinde bir yazı">Popover için tıkla</a>

<script>

$(document).ready(function(){

  $('[data-toggle="popover"]').popover();

});

</script>

Popover için tıkla

Popover Pozisyonu

Tooltip ile aynı şekilde data-placement özelliği ile pozisyon belirlenebilir.

<a data-toggle="popover" title="Popover Başlık" data-placement="auto left"

   data-content="Popover içinde bir yazı">Popover için tıkla</a>

<a data-toggle="popover" title="Popover Başlık" data-placement="right"

   data-content="Popover içinde bir yazı">Popover için tıkla</a>

<a data-toggle="popover" title="Popover Başlık" data-placement="top"

   data-content="Popover içinde bir yazı">Popover için tıkla</a>

<a data-toggle="popover" title="Popover Başlık" data-placement="bottom"

   data-content="Popover içinde bir yazı">Popover için tıkla</a>

Popover için tıkla Popover için tıkla Popover için tıkla Popover için tıkla

Aynı tooltip gibi , data-placement özelliğine auto değerini ekleyerek popover pozisyonu isteğimize uygun yerde gösterilemezse tarayıcı tarafından otomatik başka bir yerde gösterilmesini sağlayabiliriz.

Popover Kapatılması

Normalde popover'ı kapatmak için elemana tekrar tıklamak gerekir. Bununla beraber eğer elemana data-trigger="focus" özelliği verilirse odak kaybettiğinde yani eleman dışında bir yere tıklandığında kapanması sağlanır ve bu daha sağlıklı bir kullanım olacaktır. 

<button title="Dismissible popover" data-toggle="popover" data-trigger="focus"

  data-content="bu popover'ı kapatmak için eleman dışında tıkla">Tıkla beni</button>

Not : Eğer popover'ın eleman üzerinde gezinirken görünmesini istiyorsanız data-trigger özelliğine hover yazarsınız.

<button title="Otomatik popover" data-toggle="popover" data-trigger="hover"

  data-content="bu popover gezinirken açılır ve kapanır">Üzerimde gezin</button>

........................................