Anpassen von Twitter Bootstrap Popover Pfeil

Question

Ich konnte keine relevanten Informationen zu diesem finden, aber ich finde es schwer zu schlucken, dass es nicht machbar ist.

Wie kann ich den Pfeil für die Popovers anpassen? Ich habe es bereits getan, aber ich ändere die Klassen .arrow und so, aber die Position des Popover wird vermasselt.

Also, was ist der richtige Weg? Ich konnte keine Dokumentation finden.

Im Folgenden sind die Klassen, die ich verwendet habe, so weit der Pfeil falsch aussieht:

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

Der Pfeil auf dem roten Quadrat zeigen sollte

Dank.

Answer 1

Twitter Bootstrap basiert auf Less.

Wenn Sie das Aussehen der Pfeile ändern möchten, verwenden Sie dazu die bootstrap less variables.

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

Wenn Sie Sass verwenden stattdessen das gleiche tun mit dem Sass Variables.

Leider hat die TB-Customizer nicht alle Variablen, so dass Sie sie möglicherweise selbst kompilieren müssen.

Edit:

gute Nachricht die neue Bootstrap 3 customizer jetzt diese Optionen zur Verfügung stellt.

Answer 2

Ich hatte Probleme beim Anpassen der Popover-Randstärke. Um dies anzupassen, habe ich @ popoverBorderThickness zu popovers hinzugefügt.less, nur diese Zeilen werden geändert. Ich habe die ganze Datei für den Kontext aufgenommen.

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

Für alle, eine benutzerdefinierte style.css einfach mit Bootstrap zu überschreiben, ohne die LESS, die CSS-Regel neu zu kompilieren, die Sie suchen ist .popover.top > .arrow:after { border-top-color: yourColorHere; } die Farbe nur den Pfeil zu ändern.

Answer 4

diese Variablen verwenden, um Tooltips anzupassen:

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

die Dokumentation prüfen hier: http://getbootstrap.com/customize/#tooltips