Re-color Tooltip in Bootstrap 4

Sto cercando di ridisegnare/riformattare un suggerimento in Bootstrap 4 e il modo originale di farlo non sembra funzionare più. Attualmente sto facendo questo:Re-color Tooltip in Bootstrap 4

.tooltip-inner { 
    background: #7abcff; 
    background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); 
    background: -moz-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); 
    background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0); 
    color: #fff; 
    font-family: 'Roboto', Arial, sans-serif; 
} 
.tooltip.top .tooltip-arrow { 
    border-top-color: #7abcff; 
}

.tooltip-inner sta lavorando bene, ma .tooltip.top .tooltip-arrow non lo è; rimane nero. Suppongo che .tooltip.top sia la freccia in cima a un suggerimento allineato in basso.

Qualsiasi aiuto sarebbe molto apprezzato

fonte

2016-03-21 Takuhii

A partire dal Bootstrap 4.0

CSS per tooltip ricolorazione viene gestito dalla classe .tooltip-inner come avete notato:

.tooltip-inner { 
    max-width: 200px; 
    padding: 3px 8px; 
    color: #fff; 
    text-align: center; 
    background-color: #000; 
    border-radius: .25rem; 
}

Css per la parte superiore della freccia:

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before { 
    margin-left: -3px; 
    content: ""; 
    border-width: 5px 5px 0; 
    border-top-color: #000; 
}

CSS per freccia a destra:

.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before { 
    margin-top: -3px; 
    content: ""; 
    border-width: 5px 5px 5px 0; 
    border-right-color: #000; 
}

CSS per freccia in basso:

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before { 
    margin-left: -3px; 
    content: ""; 
    border-width: 0 5px 5px; 
    border-bottom-color: #000; 
}

CSS per freccia a sinistra:

.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before { 
    right: 0; 
    margin-top: -3px; 
    content: ""; 
    border-width: 5px 0 5px 5px; 
    border-left-color: #000; 
}

fonte

2017-08-29 13:52:38 madison

per favore aggiungi il codice specifico che stai suggerendo. il collegamento potrebbe cambiare e irrilevante alla domanda. quindi è consigliabile aggiungere una risposta qui in modo che la risposta abbia sempre senso della domanda –

Aggiornato, grazie per il suggerimento! Dato che è ancora in Beta, proverò a controllare la documentazione per accertarmi che le descrizioni dei comandi siano aggiornate in una versione più recente. hanno versioni statiche che puoi ispezionare. – madison

Bootstrap 4 ha diverse classi di 3, è necessario utilizzare:

.tooltip.tooltip-top .tooltip-arrow, 
.tooltip.bs-tether-element-attached-bottom .tooltip-arrow { 
    border-top-color: #7abcff; 
}

Questi selettori rappresentano freccia della parte superiore allineata tooltip.

fonte

2016-03-21 23:33:11 makshh

HA HA funziona perfettamente, grazie :) – Takuhii

Se si utilizza SASS, controllare tooltip.scss di file:

GIT

a cambiare colore, basta ignorare questi valori variabili: $tooltip-arrow-color e $tooltip-bg.

fonte

2017-04-07 10:30:09 marcelo2605

Bootstrap v4.0.0-beta

data-toggle="tooltip" data-placement="right"

-Questo funziona per me.

.tooltip-inner{ color:#000; font-weight:400; background-color:#94C120;} 
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before { border-right-color: #94C120;}

fonte

2017-08-24 00:39:48 OctavioGT

Sto usando bootstra p 4.0.0-beta.2. e questo codice ha funzionato per me.

.tooltip.bs-tooltip-bottom .tooltip-inner { 
background:#444 !important; 
} 

.tooltip .arrow:before { 
border-bottom-color:#444 !important; 
    border-top-color:#444 !important; 
    }

fonte

2017-11-08 06:56:57 kapil

Bootstrap 4.0.0 & Popper.js

Questo è il codice minimo per tooltip verde lato sinistro:

.tooltip .tooltip-inner { 
    background-color: green; 
} 

.tooltip .arrow::before { 
    border-left-color: green; 
}

Basta aggiungere al vostro CSS.

fonte

2018-02-09 12:17:33

risposta

Problemi correlati