Tooltips in Opera 11.51 positioning doesn't work

[philipp-winterle]

Ive just tested the implementation of your tooltips. They are working fine in Firefox and Chrome, but in Opera they dont work.

I discovered that they dont accept the left and top style attributes.

[StephanWagner]

Hmm, I'll have a look into that, I actually just updated to v0.2, mainly because opera didnt show the arrows right.

[mebusvg]

V 0.2 also didn't solve the problem.

[StephanWagner]

will be doing some work on mBox now, but i guess version 0.2.1 will be at least a week.
I will be doing an intense Opera test, I actually haven't done too much testing in opera yet. Please be patient :)

[philipp-winterle]

are you still on it? Else I will solve this on my own. Because I cant leave the opera users without.

[StephanWagner]

sorry mate, haven't done much on mBox recently, I'm still very busy right now.

And I can't really figure out where the problem is. I tried some things and it seams that it doesnt work with the newest mootools version (1.4.5). But it does seem to work with 1.4.1 (which I am using on HTMLtweaks).

If you go to http://htmltweaks.com/mBox (mootools 1.4.1) you will see that all mBoxes should work.
But on http://htmltweaks.com/plugins/mBox/Demo/index.html (mootools 1.4.5) it wont work.

So I'm not sure if thats a mootools bug or if its a mBox bug.

I wont be updating mBox though until August, hopefully I'll find some time then.

If you find out what the problem could be I'd appreciate if you let me know, I would love make it work in mootools 1.4.5 for opera too.

[chrisspaghetti]

Hi all, same problem here.

@hummal Did you solve it?

It does not have anything to do with the tooltips, it already seems to be the mBox Core which is not working properly.

Here is a quick sample code with Mootools 1.4.5:

<div id="myBox">testclick</div>
<script type="text/javascript" src="mBox.Core.js"></script>
<script type="text/javascript">
new mBox({
    content: 'This mBox will open when clicking on an element with id="myBox".',
    attach: 'myBox'
});
</script>

it does not work with Opera 12.12

The Opera Dragonfly says: "Invalid value for property: left" and "Invalid value for property: top"

Please help!!

[StephanWagner]

Well, the tooltip is actually just an extension of the core, so i guess the problem is in the positioning function in mBox.Core.js.
Unfortunately Im too busy these weeks that I wont have time to do some bug fixing.
You could try to use Mootools 1.4.4, which seemed to fix the positioning problem, otherwise you'd have to wait a couple of weeks until i find some time to do bug fixes.

[philipp-winterle]

I was busy at work, but I this thing is on my todo for next week. Maybe I'll be successfully. I will let you know

[philipp-winterle]

I have found the problem. And as Stephan said it is some kind of Mootools.More issue. In Opera the Element.getDimensions({computeSize:true;}) function isnt working properly.

To fix this for now in mBox you could use the Element.measure function instead.

Example for line 754:

//var wrapperDimensions = this.wrapper.getDimensions({computeSize: true});
var wrapperDimensions = this.wrapper.measure( function () { return this.getSize(); } );

...
Line 848        //same thing
...
 // Finally need to change every position calculation from totalHeight/totalWidth to x and y
//posX += (targetDimensions.totalWidth / 2) - (wrapperDimensions.totalWidth / 2);
posX += (targetDimensions.totalWidth / 2) - (wrapperDimensions.x / 2);

That's it. Just do that for every case and every possibility in the setPosition function and it should work. But before I do that I will search in the Mootools.More library for the reason why. Wouldn't be the first thing I fixed there.

So this is just a possibility to change it quick and dirty. I would suggest to differ between browsers in the beginning and just change this behaviour for opera. Creating the totalWidth manually etc.

I will let you know if I found something else

[philipp-winterle]

So guys, it's finally found. Already known bug in Mootools.More.

• Fix for #2325 and #2364 (should also fix -more #1125) mootools/mootools-core#2401
• getComputedSize not working with 'em' in Opera mootools/mootools-more#1047

This will be fixed in version 1.5.

If you don't want to wait like me, there is a very easy bugfix for you Stephan. Just add border:0; to the mBoxCore.css

.mBox.Core {
    font-size: 12px;
    line-height: normal;
    border: 0;
}

That's it. have fun

[StephanWagner]

Thanks for the good work hummal!
Unfortunately I still couldn't get it to work properly in Opera with .measure or with border:0. I only did some smoke tests, so I will do some more tests when im home.
Im testing on Mac, not sure if that plays any part in that, should be the same on windows or mac.

[philipp-winterle]

I just forked your git and made a pull request. Check it. It works on Windows Opera (latest).

Make sure you did delete the browser cache before. Opera has a strange handling. I did turn off cache completely. Will test it on a Mac tomorrow.

[philipp-winterle]

Hello Stephan,

i prepared a jsFiddle for that matter. I just loaded your mBox core from your examples page and overwrite the .mBox.Core css with border:0;.
Now all the windows align in the middle as they should. Additionally I made 2 Elements. One with border:0 and one without any border css. So you can see the outout of getComputedSize() in getDimensions({computedSize:true;}) failing in Opera.

http://jsfiddle.net/NQ9Tf/4/

Works on Opera 12.11 Mac OS X 10.7.4

[StephanWagner]

It does work when the target of the mbox is $(window).
But there is a problem when you want the mBox to display on an element.
Replace the second mBox code in your jsfiddle example with this one and you will see what i mean:

  new mBox({
    content: 'elementB',
    attach: 'showB',
    position: {
      y: ['bottom', 'outside'],
      x: 'right'
    },
    target: 'showB'
  });

In Google Chrome the mBox shows correctly to the right of the element, but in Opera it still shows incorrectly to the left and the following error is shown: "Invalid value for property: right"

Strangely it also says "Invalid value for property: top", but the top position seems to be right

[philipp-winterle]

Yeah you know why? If you assign a target mBox is taking the dimensions of this target aswell. So you need to put border:0 or any other value you want on it. Otherwise you do a NaN + Number calculation, which will lead into nothing.

posX += targetDimensions.totalWidth - (position.x[1] == 'inside' ? wrapperDimensions.totalWidth : (position.x[1] == 'center' ? (wrapperDimensions.totalWidth / 2) : 0));

jsFiddle Update as proof
http://jsfiddle.net/NQ9Tf/7/

[StephanWagner]

Nice work! You are a genius!
When I'm home I'll update mBox so that it will check the target element if is has a border defined, and if not I'll give it a border of 0, that should fix the problem once and for all :)

[philipp-winterle]

That and the update of Mootools More in future :)

Anyway I just did a little contribution to your great library. Thank you for that

[mebusvg]

When I'm home again I'll test this solution too! (On my hackintosh (OSX ML)) jQuery (UI) is just not my thing and I can't get used to it.. Hope that there will be an update soon of mBox and mForm :-)

[chrisspaghetti]

Thank you hummal for the fix, the CSS patch worked for me!

Nevertheless, an update on mBox Core JS would be nice, because there might be people like me who forget to import the CSS file (I tested it without including the css files and it did not work, it only works with the CSS file and that might be strange).

Edit: Btw, hummal's fix only applies for the Core but not for Modal usage etc.

[StephanWagner]

Just updated to 0.2.6
Should work fine now in Opera. The only thing to remember now is that you need to include mBox.Core.css (regardless if you only want to use mBox.Tooltip or mBox.Modal). Apart from that the Opera Bug should be fixed now, thanks again hummal.