Wie kann ich die Bootstrap-Tooltip-Farben anpassen, um mehrere Farboptionen zu haben?-CSS-Tutorial-php.cn

Wie kann ich die Bootstrap-Tooltip-Farben anpassen, um mehrere Farboptionen zu haben?

Linda Hamilton

Freigeben： 2024-12-20 02:31:09

Original

174 Leute haben es durchsucht

How Can I Customize Bootstrap Tooltip Colors to Have Multiple Color Options?

Anpassen der Bootstrap-Tooltip-Farben

Sie möchten die Farbe der Bootstrap-Tooltips an Ihre Designvorlieben anpassen. Sie wünschen sich jedoch die Flexibilität, über mehrere Farboptionen zu verfügen, anstatt einfach die Standardfarbe zu ersetzen.

Um dies zu erreichen, können Sie den folgenden Ansatz verwenden:

Farben anpassen< /h3>

Weisen Sie dem Element, das den Tooltip auslöst, einen eindeutigen Klassennamen zu, z „red-tooltip.“
Definieren Sie CSS-Regeln für die benutzerdefinierte Klasse, um die gewünschte Tooltip-Farbe anzugeben:

.red-tooltip + .tooltip > .tooltip-inner {
  background-color: #f00;
  /* Red color */
}

Nach dem Login kopieren

Schwarzen Pfeil beibehalten (Bootstrap-Versionen vor 5)

In früheren Versionen von Bootstrap wird der Tooltip-Pfeil möglicherweise schwarz angezeigt. Um dieses Problem zu beheben:

.red-tooltip + .tooltip.top > .tooltip-arrow {
  background-color: #f00;
}

Nach dem Login kopieren

Anpassen von Farben mit Bootstrap 4

Verwenden Sie für Bootstrap 4 die folgende CSS-Regel:

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00;
  /* Red color */
}

Nach dem Login kopieren

Vollständiger Snippet (Bootstrap 4)

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})

Nach dem Login kopieren

.tooltip-main {
  /* Custom settings for your main tooltip element */
}

.tooltip-qm {
  /* Custom settings for the question mark icon inside the main tooltip element */
}

.tooltip-inner {
  /* Custom settings for the tooltip content */
}

.tooltip.show {
  /* Custom settings for the visible tooltip */
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00;
  /* Red color */
}

Nach dem Login kopieren

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>
<style>
  .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
  .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
    /* Red color */
  }
</style>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich die Bootstrap-Tooltip-Farben anpassen, um mehrere Farboptionen zu haben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!