Wie kann ich Twitter Bootstrap tooltips sehen aus wie die popovers (ohne Titelzeile)?
Ich würde gerne ersetzen die Twitter Bootstrap tooltip-styles mit der popover-Stile. Wie kann ich das tun?
Tooltips sehen aus wie Standard:
Popovers sehen aus wie Standard:
Ich würde gerne meine tooltips werden weiß mit grauem Rand, ebenso wie die popovers.
Können Sie helfen?
Haben Sie versucht, anstelle der css tooltip mit dem popover css?
Kannst du vielleicht zeigen Sie das popover auf hover statt dem tooltip? Beispiel: stackoverflow.com/a/12343706/291541
Sorry, ich habe zu Fragen, warum Sie einfach nicht mit allen popovers? 🙂
ja, ich bin mit Popovers zu. 😉 Aber ich bin der Planung auf die tooltips als hoverable, vereinfachte tooltips (nur text, eine Zeile, kleiner Polster, kleiner text). Ich kann den hintergrund ändern, der tooltip einfach nur gut. Aber ich kann nicht herausfinden, die Grenze.
Sie können
Kannst du vielleicht zeigen Sie das popover auf hover statt dem tooltip? Beispiel: stackoverflow.com/a/12343706/291541
Sorry, ich habe zu Fragen, warum Sie einfach nicht mit allen popovers? 🙂
ja, ich bin mit Popovers zu. 😉 Aber ich bin der Planung auf die tooltips als hoverable, vereinfachte tooltips (nur text, eine Zeile, kleiner Polster, kleiner text). Ich kann den hintergrund ändern, der tooltip einfach nur gut. Aber ich kann nicht herausfinden, die Grenze.
Sie können
$('#my-thing').popover({trigger: 'hover'});
zu machen popover angezeigt, wenn der Mauszeiger überInformationsquelleAutor Ryan | 2013-04-30
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn Sie möchten, ändern Sie den style für den tooltip selbst hätten Sie zum Bearbeiten der
.tooltip-inner
Klasse in der bootstrap-css-Datei oder überschreiben Sie die.tooltip-inner
- Klasse mit einer Klasse von Ihrer eigenen.Ein Beispiel für die Grenze wäre:
Die
.tooltip-arrow
Klasse ist, was steuert die Farbe, die Größe und die position des Pfeils. Sie können nicht fügen Sie eine Grenze, um den Pfeil, weil die Grenze, was macht die Form des Pfeils. Jedoch, Sie können positionieren Sie den Pfeil 1px höher, so dass die Grenze nicht abdecken der Pfeil. Um dies zu tun, ändern Sie diebottom:0px
zubottom:1px
im.tooltip.top .tooltip-arrow
Abschnitt (Wenn Sie mit der top-tooltip etc.).Danke @philipcdavis
InformationsquelleAutor philipcdavis
Hier ist, wie ich es geschafft habe:
Fügen Sie Variablen zu.weniger
Hinzufügen, um benutzerdefinierte WENIGER-Datei
InformationsquelleAutor Ryan
JQuery-UI wird sich mit bootstrap.
Sind Sie nicht wirklich kompatibel mit einander, wie Sie überschneiden sich in eine Menge von Funktionen.
Ich hatte dieses problem vor ein paar Wochen zurück und fand diese Seite, aber ich wollte nicht, starten Sie das hinzufügen von benutzerdefinierten css für etwas, das sollte 'einfach funktionieren'. Nach dem entfernen JQuery UI heute (aus anderen Gründen), bemerkte ich die tool-Tipps suchte, wie vorgesehen. Ich weiß, das ist eine alte Frage, aber ich würde gefunden haben, diese Antwort hilfreich ein paar Wochen.
InformationsquelleAutor S. Newsham
JS
Und einfache
HTML
InformationsquelleAutor Schneider
Hier ist was für mich gearbeitet auf der rechten Seite tooltip.
Ich habe gerade eine CSS-Dreieck in der gleichen Größe wie der Pfeil, und dann zog Sie es Weg von der Bootstrap-Dreieck durch den gleichen Abstand wie die Breite der Grenze. Sich anpassen, wie erforderlich, und Sie können beziehen sich auf diese awesome Artikel für die Referenz, wie man ein Dreieck nach in jede Richtung:
http://css-tricks.com/snippets/css/css-triangle/
InformationsquelleAutor doronorenstein
Da die beste Antwort war versteckt in den Kommentaren die Frage und war nicht sichtbar auf den ersten, ich habe schließlich finden die Lösung auf meine eigenen. Es war der einfachste Weg, in meinem Fall zu verwenden popover statt tooltip mit Triggerung auf hover-event. Um dies zu tun, haben Sie 2 Möglichkeiten:
Benutzen, können Sie das Attribut " data-trigger -':
oder verwenden Sie die option 'trigger' auf popover Initialisierung:
InformationsquelleAutor Oleg