여러 색상 옵션을 갖도록 부트스트랩 도구 설명 색상을 사용자 정의하려면 어떻게 해야 합니까?

Bootstrap 도구 설명 색상 사용자 정의

디자인 기본 설정에 맞게 Bootstrap 도구 설명의 색상을 수정하고 싶습니다. 그러나 단순히 기본 색상을 바꾸는 것이 아니라 여러 색상 옵션을 사용할 수 있는 유연성을 원합니다.

이를 달성하려면 다음 접근 방식을 사용할 수 있습니다.

색상 사용자 정의

1. 다음과 같이 도구 설명을 트리거하는 요소에 고유한 클래스 이름을 할당합니다. "red-tooltip."
2. 원하는 도구 설명 색상을 지정하기 위해 사용자 정의 클래스에 대한 CSS 규칙을 정의합니다.

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

검은색 화살표 유지(5 이전의 부트스트랩 버전)

이전 버전의 Bootstrap에서는 툴팁 화살표가 검은색으로 나타날 수 있습니다. 이 문제를 해결하려면:

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

Bootstrap 4로 색상 사용자 정의

Bootstrap 4의 경우 다음 CSS 규칙을 사용하세요.

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

전체 스니펫(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>

위 내용은 여러 색상 옵션을 갖도록 부트스트랩 도구 설명 색상을 사용자 정의하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!