tooltip

class webix.ui.tooltip(data)
Arguments:
  • data (object) – A configuration object

Tooltip view.

References

views
view().
components
SingleRender().
helpers
bind(), extend(), protoUI(), template(), empty().
mixins
EventSystem(), Settings().

Referenced by

mixins
AutoTooltip().

External references

Official documentation page.

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
webix.protoUI({
    name:"tooltip",
    defaults:{
        dy:0,
        dx:20
    },
    $init:function(container){
        if (typeof container == "string"){
            container = { template:container };
        }

        this.type = webix.extend({}, this.type);

        //create  container for future tooltip
        this.$view = this._viewobj = this._contentobj = this._dataobj = webix.html.create("DIV", {role:"alert", "aria-atomic":"true"});
        this._contentobj.className = "webix_tooltip";
        webix.html.insertBefore(this._contentobj,document.body.firstChild,document.body);
        webix.attachEvent("onClick", webix.bind(function(e){
            if (this._visible && webix.$$(e) != this)
                this.hide();
        }, this));
    },
    adjust:function(){  },
    //show tooptip
    //pos - object, pos.x - left, pox.y - top
    isVisible:function(){
        return true;
    },
    show:function(data,pos){
        if (this._disabled) return;
        //render sefl only if new data was provided
        if (this.data!=data){
            this.data=webix.extend({},data);
            this.render(data);
        }

        if (this._dataobj.firstChild){
            //show at specified position
            this._contentobj.style.top = pos.y+this._settings.dy+"px";
            this._contentobj.style.left = pos.x+this._settings.dx+"px";
            this._contentobj.style.display="block";
        }
        this._visible = true;
    },
    //hide tooltip
    hide:function(){
        this.data=null; //nulify, to be sure that on next show it will be fresh-rendered
        this._contentobj.style.display="none";
        this._visible = false;
    },
    disable:function(){
        this._disabled = true;
    },
    enable:function(){
        this._disabled = false;
    },
    type:{
        template:webix.template("{obj.id}"),
        templateStart:webix.template.empty,
        templateEnd:webix.template.empty
    }

}, webix.SingleRender, webix.Settings, webix.EventSystem, webix.ui.view);