Change the color of backbone 4 tooltips according to a data-attribute

tooltip-colors.css

.tooltip-warning .tooltip-inner {background-color: #ffc107;}
.tooltip-warning.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip-warning.bs-tooltip-top .arrow::before {border-top-color: #ffc107;}
.tooltip-warning.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip-warning.bs-tooltip-right .arrow::before {border-right-color: #ffc107;}
.tooltip-warning.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip-warning.bs-tooltip-bottom .arrow::before {border-bottom-color: #ffc107;}
.tooltip-warning.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip-warning.bs-tooltip-left .arrow::before {border-left-color: #ffc107;}

.tooltip-danger .tooltip-inner {background-color: #dc3545;}  
.tooltip-danger.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip-danger.bs-tooltip-top .arrow::before {border-top-color: #dc3545;}
.tooltip-danger.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip-danger.bs-tooltip-right .arrow::before {border-right-color: #dc3545;}
.tooltip-danger.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip-danger.bs-tooltip-bottom .arrow::before {border-bottom-color: #dc3545;}
.tooltip-danger.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip-danger.bs-tooltip-left .arrow::before {border-left-color: #dc3545;}

.tooltip-primary .tooltip-inner {background-color: #007bff;}
.tooltip-primary.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip-primary.bs-tooltip-top .arrow::before {border-top-color: #007bff;}
.tooltip-primary.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip-primary.bs-tooltip-right .arrow::before {border-right-color: #007bff;}
.tooltip-primary.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip-primary.bs-tooltip-bottom .arrow::before {border-bottom-color: #007bff;}
.tooltip-primary.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip-primary.bs-tooltip-left .arrow::before {border-left-color: #007bff;}

.tooltip-secondary .tooltip-inner {background-color: #666;}  
.tooltip-secondary.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip-secondary.bs-tooltip-top .arrow::before {border-top-color: #666;}
.tooltip-secondary.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip-secondary.bs-tooltip-right .arrow::before {border-right-color: #666;}
.tooltip-secondary.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip-secondary.bs-tooltip-bottom .arrow::before {border-bottom-color: #666;}
.tooltip-secondary.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip-secondary.bs-tooltip-left .arrow::before {border-left-color: #666;}

.tooltip-success .tooltip-inner {background-color: #28a745;}
.tooltip-success.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip-success.bs-tooltip-top .arrow::before {border-top-color: #28a745;}
.tooltip-success.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip-success.bs-tooltip-right .arrow::before {border-right-color: #28a745;}
.tooltip-success.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip-success.bs-tooltip-bottom .arrow::before {border-bottom-color: #28a745;}
.tooltip-success.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip-success.bs-tooltip-left .arrow::before {border-left-color: #28a745;}

tooltip-colors.js

// use data-color to set a color for your tooltips
// ex: data-color="danger" will result in a red tooltip (used the color names of bootstrap)
// works with a the CSS aside, tested on Bootstrap 4 

$('[rel="tooltip"][data-color]').on('shown.bs.tooltip', function(e){
  $($(e.currentTarget).data('bs.tooltip').tip).addClass('tooltip-'+$(e.currentTarget).data('color'));
});