ich zu Stil versuchenStyling auf den Pfeil auf Bootstrap-Tooltips
.tooltip-inner{}
tootltips mit aber ich habe Probleme, weil ich nicht finden können, wie Tooltip kleinen Pfeil, um Stil.
Wie auf Screenshot gezeigt der Pfeil der Tooltip ist schwarz i auf die neue Farbe hinzufügen möchten:
jede Anregung?
diese Weise können Sie Tooltip-Pfeil Farbe ändern
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-bottom-color: #000000; /* black */
border-width: 0 5px 5px;
}
+1 für die Klasse abrufen, jetzt .. wie machst du es in verschiedenen Farben? Ich habe versucht, sowohl Hintergrund-und Farb-CSS-Regeln, aber es scheint, dass sie nicht funktioniert – sbaaaang
Sie müssen nur 'border-bottom-color' zu einer anderen Farbe ändern. – agriboz
danke alles, was ich wissen musste – sbaaaang
ich Geige für Sie erstellt haben.
Werfen Sie einen Blick auf 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;
}
Verwenden Sie dieses Stylesheet Sie begonnen!
.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
}
Sie können immer versuchen, diesen Code in Ihrem Haupt-CSS setzen, ohne dass die Bootstrap-Datei zu modifizieren, was die meisten empfohlen wird, so dass Sie Konsistenz behalten, wenn in einem zukünftig Sie die Bootstrap-Datei aktualisieren.
.tooltip-inner {
background-color: #FF0000;
}
.tooltip.right .tooltip-arrow {
border-right: 5px solid #FF0000;
}
Beachten Sie, dass dieses Beispiel für einen richtigen Tooltipp ist. Die tooltip-intern-Eigenschaft ändert die Tooltip-BG-Farbe, die andere ändert die Pfeilfarbe.
Sie können 'display: none;' .tooltip-Pfeil Klasse
.tooltip-arrow {
display: none;
}
Falls Sie herum und herum gehen, um dies herauszufinden, und keine der oben genannten Optionen arbeiten, ist es möglich, dass Sie einen Namensraum Konflikt von .tooltip erleben mit Bootstrap und Jquery.
Sehen Sie diese Antwort, wie zu beheben: jQueryUI Tooltips are competing with Twitter Bootstrap
Dieser arbeitete für mich!
.tooltip .tooltip-arrow {
border-top: 5px solid red !important;}
Wenn Sie Ihre Antwort bitte bearbeiten könnten und erklären, was der Code, den Sie zeigen, tut und warum/wie dieser Code die Frage beantwortet, könnte es wirklich helfen. –
Wenn Sie nur die Farben der Tooltips wie folgt tun, um Stil:
.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; }
Der Pfeil ist eine Grenze.
Sie müssen für jeden Pfeil die Farbe in Abhängigkeit von der 'Datenplatzierung' des Tooltips ändern.
.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;
}
für jeden Richtungspfeile Styling (links, rechts, oben und unten), haben wir uns mit Pfeil CSS Attributselektor auszuwählen und sie dann individuell stylen.
Trick: Der obere Pfeil muss die Randfarbe nur auf der Oberseite und die Transparenz auf den anderen 3 Seiten haben. Andere Richtungspfeile müssen auch auf diese Art gestylt werden.
click here for Working Jsfiddle Link
Hier ist die einfache 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; }
Sie brauchen mehr Details zu liefern und möglicherweise ein Beispiel für das Problem und eine Erklärung, was Sie bisher versucht haben. – John
@JohnTobin getan – sbaaaang
@Morpheus kann ich nicht, Tooltip ausblenden, wenn die Maus schweben – sbaaaang