[solved] how to get the hight of a tip element

hamburger · by **hamburger** on Sun Mar 07, 2010 4:33 pm

Hello,
i'am trying to get the high of the tip element to adjust the offset. How to do that?
Where I have to place the this.getHight()?

My code:

Line number On/Off | Expand/Contract | Select all

  var Hint = new Tips($$('.poptip'), {
   showDelay: 500,    //default is 100
   hideDelay: 100,   //default is 100
   offset: {
        'x': 40,       //I would like to adjust this in dependency of the width or hight of the tip element
        'y': -110      //not static
    },
   fixed: false,      //default is false
   className: 'test_tip', //default is .tip-wrap.
   onShow: function(tip,el) {
    tip.fade('in');
   },
   onHide: function(tip,el) {
    tip.fade('out');
   }
  });

rollbich · by **rollbich** on Sat Mar 13, 2010 1:26 pm

Hi !

Well, I'm afraid you can't do this like that because the tip is created on the fly.
So you have to modified the 'position function' in the mootools tips class in the 'mootools.more' file to get access to the height of the tip.
In the position function, the height of the tip is given by this.tip.offsetHeight
In this exemple, I added the height of the tip divided by 3 to the x offset.

Line number On/Off | Expand/Contract | Select all

 
position: function(event){
        var size = window.getSize(), scroll = window.getScroll();
        var tip = {x: this.tip.offsetWidth, y: this.tip.offsetHeight};
        var props = {x: 'left', y: 'top'};
        for (var z in props){
            var offs = 0;  
            if (z == 'x') offsh = this.tip.offsetHeight;
            var pos = event.page[z] + this.options.offsets[z] + parseInt(offsh/3);
            if ((pos + tip[z] - scroll[z]) > size[z]) pos = event.page[z] - this.options.offsets[z] - tip[z] - parseInt(offsh/3) ;
            this.tip.setStyle(props[z], pos);
        }
    },
 

hamburger · by **hamburger** on Mon Mar 15, 2010 5:50 pm

Hello rollbich,
tanks for your solution.
I'am not a mooProfessional so i need some time to look into what you recomended.
I'am thinking in a solution with the onShow-function like:

Line number On/Off | Expand/Contract | Select all

onShow: function(tip,el) { 
   var coords = tip.getCoordinates(), t = tip.getSize(), styles = 
{opacity: 0}; 
   styles.left = coords.left + (coords.width / 2).round() - (t.x / 
2).round(); 
   styles.top = coords.top - 20 - t.y; 
   tip.setStyles(styles); 
   tip.fade('in'); 
   }, 
 

but at the moment without success

ghazal · by **ghazal** on Tue Mar 16, 2010 1:15 pm

@hamburger,
I guess you are busy, but A. Newton gave you a detailed solution on googlegroups and it'd be nice to share it here, as you opened this thread.
It might be helpful to everyone.
Among the advices he gave, there is this measure stuff:
http://mootools.net/search/?search=1&query=measure
of which, I, personnally had no idea

-1st advice :
"ok. so the problem here is that Tips.js calls your show option *before* it
positions the tip. This is because the tip is hidden, so it waits for you to
show it and then positions it."
I noticed it because I always have this pb : position correctly a call

-2nd
"change the offset option dynamically"--> this is precious.

A. Newton's Mooshell solution:
http://mootools.net/shell/Swat4/2/

Generally speaking, both threads where very helpful to me because the Tooltip thingy in Moo1.2.4 isn't that obvious, and I thank you for this.

Cheers.

hamburger · by **hamburger** on Tue Mar 16, 2010 4:39 pm

Hello, here is the code i'am using:

Line number On/Off | Expand/Contract | Select all

var Hint = new Tips($$('.poptip'), {
   showDelay: 300,    //default is 100
   hideDelay: 500,   //default is 100
   offset: {           
       'x': 40,       //default is 16    
        'y': -110        //default is 16 
    },
   fixed: true,      //default is false
   className: 'my_tip', //default is .tip-wrap.
   onShow: function(tip,el) {
       tip.measure(function(){  //measure because its display:none;  
           var t = tip.getSize();
           this.setOptions({
               offset: {
                   x: 35,
                   y: 35 - t.y
               }
           });
       }.bind(this));
       tip.fade('in');
   },
   onHide: function(tip,el) {
    tip.fade('out');
   }
  });

thx for help to Aaron Newton on http://groups.google.com/group/mootools-users/

[solved] how to get the hight of a tip element

[solved] how to get the hight of a tip element

Re: how to get the hight of a tip element

Re: how to get the hight of a tip element

Re: how to get the hight of a tip element

[solved] how to get the hight of a tip element

Who is online