Bootstrap ?? ?? ?? ??? ??

??? ?? ??? ?? Bootstrap ?? ??? ??? ???? ????. ??? ??? ?? ??? ??? ?? ??? ?? ?? ??? ??? ? ?? ???? ????.

?? ????? ?? ?? ??? ??? ? ????.

?? ??? ??< /h3>

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