Twitter bootstrap popover okunu özelleştirme

Question

Bu konuyla ilgili herhangi bir bilgi bulamadım, ancak bunun uygun olmadığını yutmak zor.

Popçular için oku nasıl özelleştirebilirim? Zaten yaptım ama sınıfları değiştirdim ve böyle, ama popover pozisyonu berbat.

Peki, bunu yapmanın doğru yolu nedir? Herhangi bir belge bulamadım.

ardından ben kullanıyorum sınıflar bugüne kadar ok yanlış görünüyor şunlardır: ok kırmızı kareye

sayesinde işaret edilmelidir

.popover { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1010; 
    display: none; 
    padding: 5px; 
} 

    .popover.top { 
     margin-top: -5px; 
    } 

    .popover.right { 
     margin-left: 5px; 
    } 

    .popover.bottom { 
     margin-top: 5px; 
    } 

    .popover.left { 
     margin-left: -5px; 
    } 

    .popover.top .arrow { 
     bottom: 0; 
     left: 50%; 
     margin-left: -5px; 
     border-left: 5px solid transparent; 
     border-right: 5px solid transparent; 
     border-top: 5px solid #000000; 
    } 

    .popover.right .arrow { 
     top: 50%; 
     left: 0; 
     margin-top: -5px; 
     border-top: 5px solid transparent; 
     border-bottom: 5px solid transparent; 
     border-right: 5px solid #000000; 
    } 

    .popover.bottom .arrow { 
     top: 0px; 
     left: 50%; 
     margin-left: -5px; 
     border-left: 9px solid transparent; 
     border-right: 9px solid transparent; 
     border-bottom: 19px solid #000000; 
    } 

    .popover.left .arrow { 
     top: 50%; 
     right: 0; 
     margin-top: -5px; 
     border-top: 5px solid transparent; 
     border-bottom: 5px solid transparent; 
     border-left: 5px solid #000000; 
    } 

    .popover .arrow { 
     position: absolute; 
     width: 0; 
     height: 0; 
    } 

.popover-inner { 
    padding: 3px; 
    width: auto; 
    overflow: hidden; 
    background: #000000; 
    background: rgba(0, 0, 0, 0.8); 
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
} 

.popover-title { 
    padding: 9px 15px; 
    line-height: 1; 
    background-color: #252525; 
    -webkit-border-radius: 3px 3px 0 0; 
    -moz-border-radius: 3px 3px 0 0; 
    border-radius: 3px 3px 0 0; 
    background-color: rgba(37, 37, 37, 0.7); 
    font-size: 14px; 
    color: #7e7e7e; 
} 

.popover-content { 
    padding: 14px; 
    background-color: #252525; 
    -webkit-border-radius: 0 0 3px 3px; 
    -moz-border-radius: 0 0 3px 3px; 
    border-radius: 0 0 3px 3px; 
    -webkit-background-clip: padding-box; 
    -moz-background-clip: padding-box; 
    background-clip: padding-box; 
    background-color: rgba(37, 37, 37, 0.7); 
} 

    .popover-content p, .popover-content ul, .popover-content ol { 
     margin-bottom: 0; 
    } 

    .popover-content table { 
     background: transparent; 
    } 

     .popover-content table td { 
      border: 0px; 
      background: transparent; 
      color: #7e7e7e; 
     } 

.

Answer 1

Twitter Bootstrap, Less tabanlıdır.

Okların görünümünü değiştirmek isterseniz, bunu yapmak için bootstrap less variables kullanın.

// Tooltips and popovers 
// ------------------------- 
@tooltipColor:   #fff; 
@tooltipBackground:  #000; 
@tooltipArrowWidth:  5px; 
@tooltipArrowColor:  @tooltipBackground; 

@popoverBackground:  #fff; 
@popoverArrowWidth:  10px; 
@popoverArrowColor:  #fff; 
@popoverTitleBackground: darken(@popoverBackground, 3%); 

// Special enhancement for popovers 
@popoverArrowOuterWidth: @popoverArrowWidth + 1; 
@popoverArrowOuterColor: rgba(0,0,0,.25); 

Eğer Sass kullanıyorsanız yerine Sass Variables ile aynı şeyi.

Ne yazık ki TB-Customizer tüm değişkenlere sahip değildir, bu nedenle kendi başınıza derlemeniz gerekebilir.

Düzenleme: Yeni Bootstrap 3 customizer artık bu seçenek sunar

iyi haber.

Answer 2

Popover kenarlık kalınlığını ayarlamada sorun yaşıyordum. Bunu ayarlamak için @popoverBorderThickness öğesini popovers.less olarak ekledim, sadece bu satırlar değişti. Bağlam için tüm dosyayı ekledim. sadece aradığınız AZ, css kuralı derlemeye olmadan ön yükleme alanı üzerine yazmak özel style.css kullanan herkes için

// 
// Popovers 
// -------------------------------------------------- 


.popover { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: @zindexPopover; 
    display: none; 
    max-width: 276px; 
    padding: 1px; 
    text-align: left; // Reset given new insertion method 
    background-color: @popoverBackground; 
    -webkit-background-clip: padding-box; 
    -moz-background-clip: padding; 
      background-clip: padding-box; 
    border: @popoverBorderThickness solid @popoverOuterColor; 
    .border-radius(6px); 
    .box-shadow(0 5px 10px rgba(0,0,0,.2)); 

    // Overrides for proper insertion 
    white-space: normal; 

    // Offset the popover to account for the popover arrow 
    &.top  { margin-top: -10px; } 
    &.right { margin-left: 10px; } 
    &.bottom { margin-top: 10px; } 
    &.left { margin-left: -10px; } 
} 

.popover-title { 
    margin: 0; // reset heading margin 
    padding: 8px 14px; 
    font-size: 14px; 
    font-weight: normal; 
    line-height: 18px; 
    background-color: @popoverTitleBackground; 
    border-bottom: 1px solid darken(@popoverTitleBackground, 5%); 
    .border-radius(5px 5px 0 0); 

    &:empty { 
    display: none; 
    } 
} 

.popover-content { 
    padding: 9px 14px; 
} 

// Arrows 
// 
// .arrow is outer, .arrow:after is inner 

.popover .arrow, 
.popover .arrow:after { 
    position: absolute; 
    display: block; 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
} 
.popover .arrow { 
    border-width: @popoverArrowOuterWidth; 
} 
.popover .arrow:after { 
    border-width: @popoverArrowWidth; 
    content: ""; 
} 

.popover { 
    &.top .arrow { 
    left: 50%; 
    margin-left: -@popoverArrowOuterWidth; 
    border-bottom-width: 0; 
    border-top-color: #999; // IE8 fallback 
    border-top-color: @popoverArrowOuterColor; 
    bottom: -@popoverArrowOuterWidth; 
    &:after { 
     bottom: @popoverBorderThickness * 1.414;// longer line gets thinner use Pythagorean theorem to correct 
     margin-left: -@popoverArrowWidth; 
     border-bottom-width: 0; 
     border-top-color: @popoverArrowColor; 
    } 
    } 
    &.right .arrow { 
    top: 50%; 
    left: -@popoverArrowOuterWidth; 
    margin-top: -@popoverArrowOuterWidth; 
    border-left-width: 0; 
    border-right-color: #999; // IE8 fallback 
    border-right-color: @popoverArrowOuterColor; 
    &:after { 
     left: @popoverBorderThickness * 1.414;// longer line gets thinner use Pythagorean theorem to correct 
     bottom: -@popoverArrowWidth; 
     border-left-width: 0; 
     border-right-color: @popoverArrowColor; 
    } 
    } 
    &.bottom .arrow { 
    left: 50%; 
    margin-left: -@popoverArrowOuterWidth; 
    border-top-width: 0; 
    border-bottom-color: #999; // IE8 fallback 
    border-bottom-color: @popoverArrowOuterColor; 
    top: -@popoverArrowOuterWidth; 
    &:after { 
     top: @popoverBorderThickness * 1.414;// longer line gets thinner use Pythagorean theorem to correct 
     margin-left: -@popoverArrowWidth; 
     border-top-width: 0; 
     border-bottom-color: @popoverArrowColor; 
    } 
    } 

    &.left .arrow { 
    top: 50%; 
    right: -@popoverArrowOuterWidth; 
    margin-top: -@popoverArrowOuterWidth; 
    border-right-width: 0; 
    border-left-color: #999; // IE8 fallback 
    border-left-color: @popoverArrowOuterColor; 
    &:after { 
     right: @popoverBorderThickness * 1.414;// longer line gets thinner use Pythagorean theorem to correct 
     border-right-width: 0; 
     border-left-color: @popoverArrowColor; 
     bottom: -@popoverArrowWidth; 
    } 
    } 

} 

Answer 3

sadece ok rengini değiştirmek için .popover.top > .arrow:after { border-top-color: yourColorHere; } olduğunu.

Answer 4

ipuçları özelleştirmek için bu değişkenleri kullanın:

@tooltip-max-width:  200px; 
@tooltip-color:   #FFF; 
@tooltip-bg:    #000; 
@tooltip-opacity:   .9; 
@tooltip-arrow-width:  5px; 
@tooltip-arrow-color:  #000; 

burada docs kontrol edin: http://getbootstrap.com/customize/#tooltips