I've been attempting to style the noUi tooltips to match the bootstrap design, but I've been unsuccessful so far. I'm wondering if there's an easy way to achieve this.
I tried to structure the markup based on the bootstrap template available here:
HTML
<!-- Generated markup by the plugin -->
<div class="tooltip tooltip-top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
Javascript
// By modifying the function "addTooltip" in noUislider.js
function addTooltip ( handle, handleNumber ) {
if ( !options.tooltips[handleNumber] ) {
return false;
}
let deg = addNodeTo(handle.firstChild, 'tooltip');
addClass(deg, 'tooltip-top');
addNodeTo(deg, "tooltip-arrow");
return addNodeTo(deg, 'tooltip-inner');
// return addNodeTo(handle.firstChild, options.cssClasses.tooltip);
}
Although this generates a template, it doesn't display any tooltips at all. I must be overlooking something important. When I only add 'tooltip-top', a small, messy black tooltip does appear but it's not the desired outcome.