How To Change Tooltip Arrow Color In Bootstrap 5

With Bootstrap 5 you might be wondering how to change the tooltip arrow. It’s quite simple, you have to target each tooltip position and change the border color of each .tooltip-arrow pseudo-element regarding their positions.

    .tooltip.bs-tooltip-top .tooltip-arrow::before {
      border-top-color: red;
    }

    .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
      border-bottom-color: red;
    }

    .tooltip.bs-tooltip-start .tooltip-arrow::before {
      border-left-color: red;
    }

    .tooltip.bs-tooltip-end .tooltip-arrow::before {
      border-right-color: red;
    }