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

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>

1. Weisen Sie dem Element, das den Tooltip auslöst, einen eindeutigen Klassennamen zu, z „red-tooltip.“
2. 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 */
}

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;
}

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 */
}

Vollständiger Snippet (Bootstrap 4)

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

.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 */
}

<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>

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!