Bagaimanakah Saya Boleh Menyesuaikan Warna Petua Alat Bootstrap untuk Mempunyai Pelbagai Pilihan Warna?

Menyesuaikan Warna Petua Alat Bootstrap

Anda bercita-cita untuk mengubah suai warna petua alat Bootstrap agar sesuai dengan pilihan reka bentuk anda. Walau bagaimanapun, anda inginkan fleksibiliti untuk mempunyai berbilang pilihan warna, dan bukannya hanya menggantikan warna lalai.

Untuk mencapai matlamat ini, anda boleh menggunakan pendekatan berikut:

Menyesuaikan Warna< /h3>

1. Tetapkan nama kelas yang unik kepada elemen yang akan mencetuskan petua alat, seperti sebagai "red-tooltip."
2. Tentukan peraturan CSS untuk kelas tersuai untuk menentukan warna petua alat yang diingini:

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

Memelihara Anak Panah Hitam (versi Bootstrap sebelum 5)

Dalam versi Bootstrap yang lebih awal, anak panah petua alat mungkin kelihatan hitam. Untuk menangani perkara ini:

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

Menyesuaikan Warna dengan Bootstrap 4

Untuk Bootstrap 4, gunakan peraturan CSS berikut:

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

Snippet Penuh (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>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyesuaikan Warna Petua Alat Bootstrap untuk Mempunyai Pelbagai Pilihan Warna?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!