How Can I Customize Bootstrap Tooltip Colors to Have Multiple Color Options?-CSS Tutorial-php.cn

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

Linda Hamilton

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

Original

176 people have browsed it

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

Customizing Bootstrap Tooltip Colors

You aspire to modify the color of Bootstrap tooltips to fit your design preferences. However, you desire the flexibility to have multiple color options, rather than simply replacing the default color.

To achieve this, you can employ the following approach:

Customizing Colors

Assign a unique class name to the element that will trigger the tooltip, such as "red-tooltip."
Define CSS rules for the custom class to specify the desired tooltip color:

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

Copy after login

Preserving Black Arrow (Bootstrap versions prior to 5)

In earlier versions of Bootstrap, the tooltip arrow may appear black. To address this:

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

Copy after login

Customizing Colors with Bootstrap 4

For Bootstrap 4, use the following CSS rule:

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

Copy after login

Full Snippet (Bootstrap 4)

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

Copy after login

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

Copy after login

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

Copy after login

The above is the detailed content of How Can I Customize Bootstrap Tooltip Colors to Have Multiple Color Options?. For more information, please follow other related articles on the PHP Chinese website!