Styling la freccia sul tooltip bootstrap

Question

che sto cercando di stile tootltips utilizzando

.tooltip-inner{} 

ma sto avendo problemi di causa non riesco a trovare come stile tooltip piccola freccia.

Come mostrato sulla schermata freccia del tooltip è nero voglio aggiungere nuovo colore su quella:

qualsiasi suggerimento?

Answer 1

È possibile utilizzare questo per cambiare colore tooltip freccia

.tooltip.bottom .tooltip-arrow { 
    top: 0; 
    left: 50%; 
    margin-left: -5px; 
    border-bottom-color: #000000; /* black */ 
    border-width: 0 5px 5px; 
} 

Answer 2

ho creato violino per voi.

Date un'occhiata a here

<p> 
    <a class="tooltip" href="#">Tooltip 
     <span> 
      <img alt="CSS Tooltip callout" 
       src="http://www.menucool.com/tooltip/src/callout.gif" class="callout"> 
      <strong>Most Light-weight Tooltip</strong><br> 
      This is the easy-to-use Tooltip driven purely by CSS. 
     </span> 
    </a> 
</p> 

 

a.tooltip { 
    outline: none; 
} 

a.tooltip strong { 
    line-height: 30px; 
} 

a.tooltip:hover { 
    text-decoration: none; 
} 

a.tooltip span { 
    z-index: 10; 
    display: none; 
    padding: 14px 20px; 
    margin-top: -30px; 
    margin-left: 28px; 
    width: 240px; 
    line-height: 16px; 
} 

a.tooltip:hover span { 
    display: inline; 
    position: absolute; 
    color: #111; 
    border: 1px solid #DCA; 
    background: #fffAF0; 
} 

.callout { 
    z-index: 20; 
    position: absolute; 
    top: 30px; 
    border: 0; 
    left: -12px; 
} 
/*CSS3 extras*/ 
a.tooltip span { 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -moz-box-shadow: 5px 5px 8px #CCC; 
    -webkit-box-shadow: 5px 5px 8px #CCC; 
    box-shadow: 5px 5px 8px #CCC; 
} 

Answer 3

Utilizzare questo foglio di stile per iniziare!

.tooltip{ 
    position:absolute; 
    z-index:1020; 
    display:block; 
    visibility:visible; 
    padding:5px; 
    font-size:11px; 
    opacity:0; 
    filter:alpha(opacity=0) 
} 
.tooltip.in{ 
    opacity:.8; 
    filter:alpha(opacity=80) 
} 
.tooltip.top{ 
    margin-top:-2px 
} 
.tooltip.right{ 
    margin-left:2px 
} 
.tooltip.bottom{ 
    margin-top:2px 
} 
.tooltip.left{ 
    margin-left:-2px 
} 
.tooltip.top .tooltip-arrow{ 
    bottom:0; 
    left:50%; 
    margin-left:-5px; 
    border-left:5px solid transparent; 
    border-right:5px solid transparent; 
    border-top:5px solid #000 
} 
.tooltip.left .tooltip-arrow{ 
    top:50%; 
    right:0; 
    margin-top:-5px; 
    border-top:5px solid transparent; 
    border-bottom:5px solid transparent; 
    border-left:5px solid #000 
} 
.tooltip.bottom .tooltip-arrow{ 
    top:0; 
    left:50%; 
    margin-left:-5px; 
    border-left:5px solid transparent; 
    border-right:5px solid transparent; 
    border-bottom:5px solid #000 
} 
.tooltip.right .tooltip-arrow{ 
    top:50%; 
    left:0; 
    margin-top:-5px; 
    border-top:5px solid transparent; 
    border-bottom:5px solid transparent; 
    border-right:5px solid #000 
} 
.tooltip-inner{ 
    max-width:200px; 
    padding:3px 8px; 
    color:#fff; 
    text-align:center; 
    text-decoration:none; 
    background-color:#000; 
    -webkit-border-radius:4px; 
    -moz-border-radius:4px; 
    border-radius:4px 
} 
.tooltip-arrow{ 
    position:absolute; 
    width:0; 
    height:0 
} 

Answer 4

Si può sempre provare a mettere questo codice nel tuo css principale senza modificare il file di bootstrap ciò che è più consigliabile in modo da mantenere la consistenza, se in un futuro si aggiorna il file di bootstrap.

.tooltip-inner { 
background-color: #FF0000; 
} 

.tooltip.right .tooltip-arrow { 
border-right: 5px solid #FF0000; 

} 

Si noti che questo esempio è per un suggerimento giusto. La proprietà tooltip-inner cambia il colore BG del tooltip, l'altro cambia il colore della freccia.

Answer 5

È possibile aggiungere "display: none;" a .tooltip freccia classe

.tooltip-arrow { 
    display: none; 
} 

Answer 6

Nel caso in cui si sta andando in giro e in giro per capirlo e nessuna delle opzioni di cui sopra stanno lavorando, è possibile si verifica un nome dello spazio conflitto di .tooltip con bootstrap e jquery.

Vai a questa risposta su come risolvere il problema: jQueryUI Tooltips are competing with Twitter Bootstrap

Answer 7

Questo ha funzionato per me!

.tooltip .tooltip-arrow { 
border-top: 5px solid red !important;} 

Answer 8

Se vuoi per lo stile solo i colori dei tooltip fanno come segue:

.tooltip-inner { background-color: #000; color: #fff; } 
.tooltip.top .tooltip-arrow { border-top-color: #000; } 
.tooltip.right .tooltip-arrow { border-right-color: #000; } 
.tooltip.bottom .tooltip-arrow { border-bottom-color: #000; } 
.tooltip.left .tooltip-arrow { border-left-color: #000; } 

Answer 9

La freccia è un confine.
È necessario modificare per ogni freccia il colore in base al "posizionamento dati" del suggerimento.

.tooltip.top .tooltip-arrow { 
    border-top-color: @color; 
} 
.tooltip.top-left .tooltip-arrow { 
    border-top-color: @color; 
} 
.tooltip.top-right .tooltip-arrow { 
    border-top-color:@color; 
} 
.tooltip.right .tooltip-arrow { 
    border-right-color: @color; 
} 
.tooltip.left .tooltip-arrow { 
    border-left-color: @color; 
} 
.tooltip.bottom .tooltip-arrow { 
    border-bottom-color: @color; 
} 
.tooltip.bottom-left .tooltip-arrow { 
    border-bottom-color: @color; 
} 
.tooltip.bottom-right .tooltip-arrow { 
    border-bottom-color: @color; 
} 
.tooltip > .tooltip-inner { 
    background-color: @color; 
} 

Answer 10

Per acconciature ciascuno frecce direzionali (sinistra, destra, superiore e inferiore), si devono selezionare ogni freccia utilizzando CSS selettore di attributo e poi lo stile singolarmente.

Trucco: La freccia superiore deve avere il colore del bordo solo sul lato superiore e trasparente sugli altri 3 lati. Anche altre frecce direzionali devono essere stilizzate in questo modo.

click here for Working Jsfiddle Link

Ecco la semplice CSS,

.tooltip-inner { background-color:#8447cf;} 

[data-placement="top"] + .tooltip > .tooltip-arrow { border-top-color: #8447cf;} 

[data-placement="right"] + .tooltip > .tooltip-arrow { border-right-color: #8447cf;} 

[data-placement="bottom"] + .tooltip > .tooltip-arrow {border-bottom-color: #8447cf;} 

[data-placement="left"] + .tooltip > .tooltip-arrow {border-left-color: #8447cf; }