search

dillon-sellars / BeautyTips

BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec to dynamically draw tooltips (sometimes called "talk bubbles" or "help balloons") associated with a html element on the page.
35 stars 8 forks source link

Can't Use BeautyTips with jQueryMobile #3

Open AlKoch opened 12 years ago

AlKoch commented 12 years ago

Thanks for taking over the "care & feeding" of BeautyTips - this looks like a very nice piece of software. I am trying to integrate it into some current work and it is failing with jQueryMobile. While I am using jQueryMobile, my problem is occurring in the standard desktop Firefox 11 and IE 9 browsers. If I can get this bug resolved, I'll then setup BeautyTips to work off of a "touch" event in a mobile device, but at the moment I can't get it to work in a standard browser.

I have some elements on a page where BeautyTips works fine. Hover over a "standard" link and we get a nice BeautyTip. But, if I attach a BeautyTip to an element in a jQueryMoble listview, hovering over a list item causes the BeautyTip to appear as a single, long line extending out of a small tootip "balloon" and the text flashes on and off until I move the mouse off of the listview. If hoverIntent is not included, it flashes "quickly", if it is included, it flashes "slowly". I cannot find any references to such a problem so I am hoping you know why this is happening.

I have tried defining the BeautyTip in a variety of ways: the default where the title attribute provides the text, placing the hint text in the call to bt() and fetching the help text from another attribute but they all fail in the the same fashion. I've also tested with the hoverIntent and easing libraries included and excluded but that makes no difference. Finally, I tried changing the trigger to focus/blur events but still have the same problem, although in this last case I just got the single, long line of hint text without the flashing.

I'd appreciate your feedback on this. I got excited about BeautyTips and sold management on using this but now I have a "fatal" problem, so I'm really in a jam.

Thanks for your help.

AlKoch commented 12 years ago

Here is some additional, important information!

It appears that the problem is dependent upon the length of the text to be displayed. If the "tip text" is short enough to fit in the current specified width of the BeautyTip then there is no problem. However, if the text needs to be wrapped (and the size of the "balloon" expanded), it fails to do so and just continues on out through the right side of the BeautyTip. Further, since the tip displays to the left of the element, the "run over text" extends onto the element itself and if the text happens to flow past the point where the mouse is placed, the text starts flashing. If the mouse is moved further to the right so that its position no longer overlaps the text, the flashing stops. It is still the case that this happens only when jQuery Mobile is included in the page. If it is not included the page no longer displays properly (no surprise there!) but in that case the BeautyTips work just fine.

I hope this additional info helps.

AlKoch commented 12 years ago

Hello - Is anyone monitoring this forum? I really need some help with this. Thanks.