Bagaimanakah Saya Boleh Menyesuaikan Warna Petua Alat Bootstrap untuk Mempunyai Pelbagai Pilihan Warna?-tutorial css-php.cn

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

Linda Hamilton

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

asal

176 orang telah melayarinya

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

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>

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

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

Snippet Penuh (Bootstrap 4)

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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!