[html] 부트 스트랩 툴팁 색상 변경
내가하려는 것은 툴팁 색상을 빨간색으로 변경하는 것 입니다. 그러나 다른 색상도 여러 개 갖고 싶기 때문에 단순히 원래 도구 설명의 색상을 바꾸고 싶지는 않습니다.
어떻게하면 되나요?
답변
다음과 같이 사용할 수 있습니다.
<a href="#" data-toggle="tooltip" data-placement="bottom"
title="" data-original-title="Tooltip on bottom"
class="red-tooltip">Tooltip on bottom</a>
그리고 CSS에서 :
.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
Moeen MH : 최신 버전의 부트 스트랩을 사용하여 검은 색 화살표를 제거하려면 다음을 수행해야합니다.
.red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}
Bootstrap 4에 사용하십시오.
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
border-bottom-color: #f00; /* Red */
}
전체 스 니펫 :
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
.tooltip-main {
width: 15px;
height: 15px;
border-radius: 50%;
font-weight: 700;
background: #f3f3f3;
border: 1px solid #737373;
color: #737373;
margin: 4px 121px 0 5px;
float: right;
text-align: left !important;
}
.tooltip-qm {
float: left;
margin: -2px 0px 3px 4px;
font-size: 12px;
}
.tooltip-inner {
max-width: 236px !important;
height: 76px;
font-size: 12px;
padding: 10px 15px 10px 20px;
background: #FFFFFF;
color: rgb(0, 0, 0, .7);
border: 1px solid #737373;
text-align: left;
}
.tooltip.show {
opacity: 1;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
border-bottom-color: #f00;
/* Red */
}
<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 */
}
</style>
답변
부트 스트랩 2
캐럿 / 화살표도 변경하려면 다음을 수행하십시오.
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
.red-tooltip + .tooltip > .tooltip-arrow {border-bottom-color: #f00;}
또는
.red-tooltip + .tooltip > .tooltip-inner, .red-tooltip + .tooltip > .tooltip-arrow {background-color: #f00;}
jsFiddle : http://jsfiddle.net/technotarek/2htZe/
업데이트 : 부트 스트랩 3
Bootstrap 3에서 도구 설명의 방향을 구체적으로 지정해야합니다. 예 :
.tooltip.top .tooltip-inner {
background-color:red;
}
.tooltip.top .tooltip-arrow {
border-top-color: red;
}
부트 스트랩 3을 사용하는 모든 툴팁 지침에 대한 jsFiddle : http://jsfiddle.net/technotarek/L2rLE/
답변
나를 위해 일하는 유일한 방법 :
$(document).ready(function() {
//initializing tooltip
$('[data-toggle="tooltip"]').tooltip();
});
.tooltip-inner {
background-color: #00acd6 !important;
/*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
color: #fff;
}
.tooltip.top .tooltip-arrow {
border-top-color: #00acd6;
}
.tooltip.right .tooltip-arrow {
border-right-color: #00acd6;
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: #00acd6;
}
.tooltip.left .tooltip-arrow {
border-left-color: #00acd6;
}
<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--tether-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<!--Bootstrap-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!--Tooltip Example-->
<div style="padding:50px;">
<span class="fa-stack fa-lg" data-toggle="tooltip" data-placement="right" title="custom colored tooltip">hover over me
</span>
</div>
답변
bootstrap4의 경우 코드를 사용했습니다.
.tooltip-inner {
background-color: #color !important;
color: #color ;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
border-top-color: #color !important;
}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
border-right-color: #color !important;
}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
border-bottom-color: #color !important;
}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
border-left-color: #color !important;
}
답변
다음은 boostrap의 도구 설명 코드입니다.
.tooltip {
position: absolute;
z-index: 1070;
display: block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
filter: alpha(opacity=0);
opacity: 0;
line-break: auto;
}
.tooltip.in {
filter: alpha(opacity=90);
opacity: .9;
}
.tooltip.top {
padding: 5px 0;
margin-top: -3px;
}
.tooltip.right {
padding: 0 5px;
margin-left: 3px;
}
.tooltip.bottom {
padding: 5px 0;
margin-top: 3px;
}
.tooltip.left {
padding: 0 5px;
margin-left: -3px;
}
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #fff;
text-align: center;
background-color: #000;
border-radius: 4px;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
right: 5px;
bottom: 0;
margin-bottom: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
bottom: 0;
left: 5px;
margin-bottom: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
top: 0;
right: 5px;
margin-top: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
top: 0;
left: 5px;
margin-top: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
답변
화살표 색상의 경우 다음을 사용할 수 있습니다.
.tooltip .tooltip-arrow {border-top: 5px solid red !important;}
답변
중요한 점은 Bootstrap 4부터는 Bootstrap Sass 변수 파일에서 이러한 스타일을 직접 사용자 지정할 수 있으므로 _variables.scss에는 다음 옵션이 있습니다.
//== Tooltips
//
//##
// ** Tooltip max width
$tooltip-max-width: 200px !default;
// ** Tooltip text color
$tooltip-color: #fff !default;
// ** Tooltip background color
$tooltip-bg: #000 !default;
$tooltip-opacity: .9 !default;
// ** Tooltip arrow width
$tooltip-arrow-width: 5px !default;
// ** Tooltip arrow color
$tooltip-arrow-color: $tooltip-bg !default;
여기를 참조하십시오 : http://v4-alpha.getbootstrap.com/getting-started/options/
Grunt 또는 Gulp 빌드 도구를 사용하여 Sass에서 작업하고 컴파일하는 것이 가장 좋습니다.