Personalizzazione della freccia popover twitter bootstrap

Question

Non sono riuscito a trovare alcuna informazione pertinente al riguardo, ma trovo difficile ingoiare che non sia fattibile.

Come posso personalizzare la freccia per i popover? Ho già fatto ma cambiando le classi .arrow e così via, ma la posizione del popover si fa rovinare.

Quindi, qual è il modo corretto per farlo? Non sono riuscito a trovare alcuna documentazione.

seguito sono le classi che ho usato, finora la freccia sembra sbagliato:

.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; 
     } 

La freccia deve essere rivolta verso la Piazza Rossa

Grazie.

Answer 1

Twitter Bootstrap è basato su Less.

Se si desidera modificare l'aspetto delle sue frecce utilizzare lo bootstrap less variables per farlo.

// 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); 

Se si utilizza invece Sass fare lo stesso con la Sass Variables.

Purtroppo il TB-Customizer non ha tutte le variabili, quindi potrebbe essere necessario compilarlo da solo.

Edit:

Buone notizie la nuova Bootstrap 3 customizer ora fornisce queste opzioni.

Answer 2

Ho riscontrato problemi durante la regolazione dello spessore del bordo del popover. Per aggiustarlo ho aggiunto @popoverBorderThickness a popovers.less, solo quelle righe sono state cambiate. Ho incluso l'intero file per il contesto.

// 
// 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

per chiunque utilizzi uno style.css personalizzato per sovrascrivere semplicemente bootstrap senza ricompilare il minore, la regola CSS che stai cercando è .popover.top > .arrow:after { border-top-color: yourColorHere; } per cambiare il colore del proprio freccia.

Answer 4

utilizzare queste variabili per personalizzare le descrizioni dei comandi:

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

Controllare la documentazione qui: http://getbootstrap.com/customize/#tooltips