Dostosowywanie poppers arrow twitter arrow

Question

Nie mogłem znaleźć żadnych istotnych informacji na ten temat, ale trudno mi jest połknąć, że nie jest to możliwe.

W jaki sposób mogę dostosować strzałkę do popover? Już zrobiłem, ale zmieniłem klasy .arrow i takie, ale pozycja popover zostaje spieprzona.

Jaki jest zatem właściwy sposób? Nie mogłem znaleźć żadnej dokumentacji.

Poniżej przedstawiono klasy używam, więc daleko strzałka wygląda źle:

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

strzałka powinna być skierowana do czerwonego kwadratu

dzięki.

Answer 1

Twitter Bootstrap jest oparty na Less.

Jeśli chcesz zmienić wygląd swoich strzałek, użyj opcji bootstrap less variables, aby to zrobić.

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

Jeśli używasz Sass zamiast zrobić to samo z Sass Variables.

Niestety, TB-Customizer nie ma wszystkich zmiennych, więc może być konieczne samodzielne skompilowanie.

Edit:

Good news nowa Bootstrap 3 customizer teraz udostępnia te opcje.

Answer 2

Wystąpił problem z dopasowaniem grubości krawędzi popover. Aby to zmienić dodałem opcję @popoverBorderThickness do pliku popovers.less, tylko te linie zostały zmienione. Zawarłem cały plik dla kontekstu.

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

Dla każdego z użyciem niestandardowego style.css po prostu nadpisać bootstrap bez rekompilacji mniej reguły css, którego szukasz jest .popover.top > .arrow:after { border-top-color: yourColorHere; } zmienić kolor tylko strzałki.

Answer 4

pomocą tych zmiennych, aby dostosować podpowiedzi:

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

Sprawdź docs tutaj: http://getbootstrap.com/customize/#tooltips