Response title
This is preview!
Move this topic
Does the new jQuery UI Tooltip widget display properly when triggered in modal and/or iframe elements?
in Using jQuery UI
•
7 months ago
Does anyone know if the new jQuery UI 1.9 tooltip widget displays properly when triggered in modal and/or iframe elements?
I'm crossing my fingers because I've run into a problem with most tooltip plugins either not displaying properly in either modals or iframes or require complicated fixes to do so. Tooltips inside iframes are confined within the iframe region and can be cut off unless initialized from the parent document (which I've had trouble figuring out how to actually do), and tooltips within modals are both dimmed by the overlay and partially obscured by the modal (and the z-index and opacity can be difficult to reset).
I'm crossing my fingers because I've run into a problem with most tooltip plugins either not displaying properly in either modals or iframes or require complicated fixes to do so. Tooltips inside iframes are confined within the iframe region and can be cut off unless initialized from the parent document (which I've had trouble figuring out how to actually do), and tooltips within modals are both dimmed by the overlay and partially obscured by the modal (and the z-index and opacity can be difficult to reset).
1
Replies(6)
Hi,
I made a quick test using the demo files from the jquery documentation, it looks like the issues of the tooltips in a modal are now fixed. you can have a look here to my sample (click on the button "Create new user", to open a modal box with fields and tooltips):
For the iframe case, it looks also fixed but perhaps not the way you want. The tooltip size is changed to fit inside the iframe. You can try the same sample in an iframe here (click on the link "View" on top right area):
The bad news is that I found a bug making this sample (in chrome and FF), when the modal is displayed, the focus is set to the first field of the form, the first tooltip is displayed and is never hidden! If you move over the next field, a second tooltip is displayed, the first one is not hidden. The user has to click outside the field to hide all the tooltips.
Regards,
Dominique VINCENT
http://www.toitl.com/
Leave a comment on dominique.vincent.toitl.com's reply
The site security prevented me from triggering the iframe in your sample, but I tried creating one myself last night. I think I encountered a similar problem, but by triggering it closer to the edge of the frame I experienced it slightly differently - the entire tooltip moved to the left in order to fit and appears over another field (which would be extremely confusing to a user). Adjusting the height and/or width helps somewhat. I'm using the custom style demo (it's a rectangular speech bubble style), and adjusting the position of .arrow.left helps too, but would require me manually assigning an arrow position for each tooltip (and would probably cause problems with smaller windows or screen sizes).
If you'd like to take a look at my sample it's at: Page which launches iframe iframe with tooltip
I'm hoping that differences in what we experienced might help us figure out a fix ;-)
Would you know how to modify the settings or script to make sure that the arrow is always positioned at the center (top or bottom) of the trigger element? I tried experimenting with jQuery's position options, but couldn't get a handle on it.
If you'd like to take a look at my sample it's at: Page which launches iframe iframe with tooltip
I'm hoping that differences in what we experienced might help us figure out a fix ;-)
Would you know how to modify the settings or script to make sure that the arrow is always positioned at the center (top or bottom) of the trigger element? I tried experimenting with jQuery's position options, but couldn't get a handle on it.
Leave a comment on Chaya Cooper's reply
There is a jscript error in one of your script:
Uncaught ReferenceError: $j is not defined click2fit.js:10
$j(':button:contains(My Button)').click(changeClass);
Regarding the positioning of your tooltip, the issue is in your function here:
$( document ).tooltip({
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
It works well for a simple anchor element like "tooltip" but it doesn't work for your multi-select menus.
You could provide different positioning functions based on the type of the elements.
I was excited when I saw your posting because I was hoping that by narrowing it down to the multiselect plugin that I'd be able to troubleshoot the problem, but unfortunately when I created a new iframe without any other scripts or plugins the tooltip arrow was still repositioning incorrectly for elements on the right side of the iframe. I've stripped it down so that it only includes 3 links necessary for jquery and jquery ui, and uploaded a new page to http://click2fit.com/test_files/custom-style1a.html, and to view it inside an iframe click here: http://click2fit.com/test_files/launch_iframe.html
I'm glad you caught those errors :-) It seemed to be working fine so I wouldn't have known that there was a problem. I'd love to know what you were running that caught it :-) Someone in the jQuery forum actually helped me write that code, and I'm somewhat of a beginner so I don't quite know how to go about finding or fixing the problem :-( Any chance you can help me figure that out? I've left the original file at http://click2fit.com/test_files/custom-style1.html
I'm glad you caught those errors :-) It seemed to be working fine so I wouldn't have known that there was a problem. I'd love to know what you were running that caught it :-) Someone in the jQuery forum actually helped me write that code, and I'm somewhat of a beginner so I don't quite know how to go about finding or fixing the problem :-( Any chance you can help me figure that out? I've left the original file at http://click2fit.com/test_files/custom-style1.html
Leave a comment on dominique.vincent.toitl.com's reply
In Chrome you can see all the jscript errors in the console of the dev tool.
Regards,
Dominique VINCENT
http://www.toitl.com/
For the arrow position, you have to play with the following part of your code:
.arrow.left {
left: 20%;
}
try something like:
.arrow.left {
left: 80%;
}
Regards,
Dominique VINCENT
http://www.toitl.com/
Thank you!
That worked and is a much simpler approach :-) Something in my code must have been preventing that from working the first time so I thought I was banging my head against the wall trying to find a workaround.
That worked and is a much simpler approach :-) Something in my code must have been preventing that from working the first time so I thought I was banging my head against the wall trying to find a workaround.
Leave a comment on dominique.vincent.toitl.com's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Chaya Cooper's question
Statistics
- 6 Replies
- 2232 Views
- 1 Followers
