Ich möchte die Twitter Bootstrap tooltip styles durch die popover styles ersetzen. Wie kann ich das machen?Wie kann ich Twitter Bootstrap-Tooltips aussehen wie die Popovers (ohne die Titelzeile)?
Tooltips sehen wie folgt standardmäßig:
Popovers aussehen wie dies standardmäßig:
ich meine Tooltips weiß sein möchten, mit einem grauen Rand , genau wie die Popovers.
Können Sie helfen?
Hier ist, wie ich es an die Arbeit bekam:
In den benutzerdefinierten LESS-Datei variables.less
@tooltipArrowOuterWidth: @tooltipArrowWidth + 1;
@tooltipArrowOuterColor: rgba(0,0,0,.25);
hinzufügen
// Tooltip
// --------------------------------------------------
.tooltip.in { .opacity(100); }
.tooltip-inner {
background:@popoverTitleBackground;
color:@gray;
}
.tooltip .arrow {
border-width: @tooltipArrowOuterWidth;
}
.tooltip {
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: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
.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; }
}
.tooltip-inner {
margin: 0; // reset heading margin
padding: 4px 8px;
font-size: @baseFontSize * 0.9;
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;
}
}
// Arrows
//
// .arrow is outer, .arrow:after is inner
.tooltip .tooltip-arrow,
.tooltip .tooltip-arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip .tooltip-arrow {
border-width: @tooltipArrowOuterWidth;
}
.tooltip .tooltip-arrow:after {
border-width: @tooltipArrowWidth;
content: "";
}
.tooltip {
&.top .tooltip-arrow {
left: 50%;
margin-left: [email protected];
border-bottom-width: 0;
border-top-color: #999; // IE8 fallback
border-top-color: @popoverArrowOuterColor;
bottom: [email protected];
&:after {
bottom: 1px;
margin-left: [email protected];
border-bottom-width: 0;
border-top-color: @tooltipArrowColor;
}
}
&.right .tooltip-arrow {
top: 50%;
left: [email protected];
margin-top: [email protected];
border-left-width: 0;
border-right-color: #999; // IE8 fallback
border-right-color: @tooltipArrowOuterColor;
&:after {
left: 1px;
bottom: [email protected];
border-left-width: 0;
border-right-color: @tooltipArrowColor;
}
}
&.bottom .tooltip-arrow {
left: 50%;
margin-left: [email protected];
border-top-width: 0;
border-bottom-color: #999; // IE8 fallback
border-bottom-color: @tooltipArrowOuterColor;
top: [email protected];
&:after {
top: 1px;
margin-left: [email protected];
border-top-width: 0;
border-bottom-color: @tooltipArrowColor;
}
}
&.left .tooltip-arrow {
top: 50%;
right: [email protected];
margin-top: [email protected];
border-right-width: 0;
border-left-color: #999; // IE8 fallback
border-left-color: @tooltipArrowOuterColor;
&:after {
right: 1px;
border-right-width: 0;
border-left-color: @tooltipArrowColor;
bottom: [email protected];
}
}
}
Das ist großartig, aber ich denke nicht, ist eine gute Idee, bootstrap ursprünglichen Variablen zu ändern.less, was ist, wenn neue Version raus, als Sie vorsichtig sein müssen :( – Schneider
Wenn Sie den Stil für den Tooltip selbst ändern möchten, müssten Sie die Klasse .tooltip-inner in der CSS-Datei des Bootstrap bearbeiten oder die Klasse .tooltip-inner mit einer eigenen Klasse überschreiben.
Ein Beispiel für die Grenze wäre:
.tooltip-inner {
border: solid 1px #ccc;
}
danke. Ich habe Hintergrund- und Farbstile sowie die Variable tooltiparrowcolor hinzugefügt. Allerdings kann ich den Rand nicht um den Pfeil oder den Pfeil vor der Tooltip-Innenseite bekommen. Stattdessen fällt der Pfeil außerhalb der Grenze. Kannst du mich mit dem ganzen Paket in die richtige Richtung weisen? – Ryan
Die '.tooltip-arrow' Klasse steuert die Farbe, Größe und Position des Pfeils. Sie können dem Pfeil keinen Rahmen hinzufügen, da der Rahmen die Form des Pfeils darstellt. Sie können den Pfeil jedoch 1px höher positionieren, so dass der Rand den Pfeil nicht abdeckt. Ändern Sie dazu im Bereich ".tooltip.top .tooltip-arrow" die Option "bottom: 0px" nach "bottom: 1px" (wenn Sie den oberen Tooltip usw. verwenden). – philipcdavis
Danke @philipcdavis – Ramanathan
JS
$(function() {
$('[title]').attr("data-rel", "tooltip");
$("[data-rel='tooltip']")
.attr("data-placement", "top")
.attr("data-content", function() {
return $(this).attr("title")
})
.removeAttr('title');
var showPopover = function() {
$(this).popover('show');
};
var hidePopover = function() {
$(this).popover('hide');
};
$("[data-rel='tooltip']").popover({
trigger: 'manual'
}).click(showPopover).hover(showPopover, hidePopover);
});
Und einfache HTML
<h1 title="This is title">What is this</h1>
Hier ist, was für mich auf der rechten Seite Tooltip gearbeitet.
Ich nahm nur ein CSS-Dreieck von der gleichen Größe wie der Pfeil, und zog es dann aus dem Bootstrap-Dreieck um die gleiche Strecke wie die Breite der Grenze. Passen Sie je nach Bedarf, und Sie können zu diesem fantastischen Artikel als Referenz verweisen, wie ein Dreieck zeigt in jede Richtung zu machen:
http://css-tricks.com/snippets/css/css-triangle/
.tooltip .tooltip-inner {
background: white;
color: black;
border: 3px solid black;
padding: 10px;
line-height: 1.65em;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -15px;
border-right-color: white;
border-width: 15px 15px 15px 0;
}
.tooltip.right .tooltip-arrow:after {
content: " ";
position: absolute;
z-index: -1;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid black;
top: -15px;
left: -3px;
}
JQuery UI mit Bootstrap stört.
Sie sind nicht wirklich miteinander kompatibel, da sie sich in vielen Funktionen überschneiden.
Ich hatte dieses Problem ein paar Wochen zurück und fand diese Seite, aber ich wollte nicht anfangen, benutzerdefinierte CSS für etwas hinzuzufügen, das 'einfach funktionieren' sollte. Nach dem Entfernen von JQuery UI heute (aus einem anderen Grund) bemerkte ich, dass die Tool-Tipps wie beabsichtigt aussahen. Ich weiß, das ist eine alte Frage, aber ich hätte diese Antwort vor ein paar Wochen nützlich gefunden.
Da die beste Antwort in den Kommentaren zu der Frage versteckt war und zunächst nicht sichtbar war, habe ich die Lösung selbst gefunden.In meinem Fall war es am einfachsten, Popover anstelle von Tooltip zu verwenden, um es beim Hover-Ereignis auszulösen. Um das zu tun, dass Sie zwei Möglichkeiten:
Sie können Attribut 'Daten-Trigger' verwenden:
<td id="3" data-content="Tooltip text" data-placement="bottom" data- container="body" data-trigger="hover" data-original-title="" title="">This tooltiped</span></td>
oder Option 'Trigger' auf popover Initialisierung:
$('.payment').popover({
trigger: "hover",
})
Haben Sie versucht, Ersetzen der Tooltip CSS mit dem Popover CSS? –
Vielleicht können Sie das Popover bei Hover anstelle des Tooltips anzeigen? Beispiel: http://stackoverflow.com/a/12343706/291541 – Getz
Entschuldigung, ich muss fragen, warum Sie nicht alle Popovers verwenden? :) –