kit/assets/tooltip2/tooltip2.js

/** @module Tooltip2 */
kit.PluginManager.register('Tooltip2',function(module, exports, require, global){

    var Viewer = require('Viewer');
    var support = require('support');
    var ActionCollection = require('ActionCollection');
    var Action = require('Action');
    var userAction = require('userAction');
    var align = require('align');
    var animations = require('animations');

    const PLUGIN_NAME = 'tooltip2';

    const Default = {
        template: '<div class="tooltip" role="tooltip" style="display: none">' +
            //'<div class="tooltip-arrow" data-popper-arrow="true"></div>' +
            '<div class="tooltip-inner"></div>' +
            '</div>',
    };


    /**
     * @memberOf kit
     * @param masterNode
     * @param hintNode
     * @constructor
     */
    var Tooltip2 = function(masterNode, hintNode) {
        var self = this;
        this.masterNode = support.getNode(masterNode);
        this.hintNode = support.getNode(hintNode);
        if(!this.hintNode) {
            this.hintNode = support.makeNode(Default.template);
        }
        this.hintNode.remove();
        this.masterNode.appendChild(this.hintNode);
        support.setNodeData(this.masterNode, PLUGIN_NAME, this);

        this.align = new align.Class(this.hintNode, this.masterNode);
        this.align.offset = [0, 10];
        var hint = new userAction.Hint(this.masterNode, this.hintNode);
        this.viewer = hint.viewer;
        this.viewer.delayHide = 400;
        this.viewer.animShowClass = animations.fadeIn;
        this.viewer.animHideClass = animations.fadeOut;
        this.viewer.onShow.push(function () {
            self.render();
        });
        this.action = new ActionCollection([
            hint
        ]);
    };

    var __proto = Tooltip2.prototype;

    __proto.setContent = function(html = ''){
        var titleNode = this.hintNode.querySelector('.tooltip-inner');
        support.innerHtml(titleNode, html);
    };

    __proto.run = function(){
        this.action.run();
    };
    __proto.stop = function(){
        this.action.stop();
    };
    __proto.unset = function(){
        this.viewer.hide();
        this.stop();
        support.setNodeData(this.masterNode, PLUGIN_NAME, null);
    };
    __proto.render = function(){
        this.align.set('center', 'top', 'center', 'top');
    };

    module.exports = Tooltip2;

    return module.exports;
});