Source: components/filter/filter-tree/filter-option-element/filter-tooltip.js

import jQ from 'jquery';

import BaseComponent from "../../../base-component";
import Utils from '../../../../helpers/utils';
import Class from '../../../../helpers/class';

/**
 * The tooltip of a filter option
 * @extends BaseComponent
 */
class FilterTooltip extends BaseComponent {
	/**
	 * Creates a new tool tip.
	 * @param {string} tooltipText - The raw text of a tool tip. We escape, strip html,... in the constructor
	 */
	constructor(tooltipText) {
		super();

		if (typeof tooltipText == 'string') {
			this.tooltipText = Utils.escape(Utils.stripHtml(tooltipText)).trim();
		} else {
			this.tooltipText = null;
		}
		
		this.$element = null;
		this.$popupElement = null;
	}

	/**
	 * Get template of the tool tip
	 * Tooltip has 2 divs, the '?' icon and the popup div on hover.
	 * @param {string} name - 'popup' or '': which template to get, the pop up or the icon
	 * @returns {string}
	 */
	getTemplate(name) {
		switch (name) {
			case 'popup':
				return `
					<div class="boost-pfs-filter-tooltip-wrapper">
						<div class="boost-pfs-filter-qtip-content">{{tooltipText}}</div>
					</div>
				`;
			default:
				return `
					<div class="{{class.filterOptionTooltip}}">
						<span class="boost-pfs-filter-tooltip-arrow"></span>
					</div>
				`;	
		}
	}

	compileTemplate(name) {
		return this.getTemplate(name)
					.replace(/{{tooltipText}}/g, this.tooltipText)
					.replace(/{{class.filterOptionTooltip}}/g, Class.filterOptionTooltip);
	}

	isRender() {
		return !!this.tooltipText;
	}

	render() {
		if (!this.$element) {
			this.$element = jQ(this.compileTemplate());
		}
		if (!this.$popupElement){
			this.$popupElement = jQ(this.compileTemplate('popup'));
		}
	}

	isBindEvents() { return !this.isBoundEvent; }

	bindEvents() {
		if (this.$element && this.$popupElement) {
			this.$element.on('mouseover', this.showTooltipPopup.bind(this));
		}
	}

	/**
	 * Called on hover the tooltip
	 * Calculate the location of the pop up, and show it
	 */
	showTooltipPopup() {
        var popupOffset = this.$element.position();
        var popupWidth = this.$popupElement.find('.boost-pfs-filter-qtip-content').outerWidth();

        this.$popupElement.css('left', popupOffset.left + 'px');
        if (popupWidth / 2 < popupOffset.left) {
            this.$popupElement.css('margin-left', -(popupWidth / 2 -12) + 'px');
        } else if (popupWidth / 2 > popupOffset.left) {
			this.$popupElement.css('margin-left', -(popupOffset.left / 2) + 'px');
		}	
	}
}
export default FilterTooltip;