jquery-powertip
jquery-powertip copied to clipboard
stevenbenner
Powertip use inside iFrames
I am trying to use Powertip's on elements inside iFrames and they are positioned incorrectly because they don't take into account the position of the iFrame(s). Any help in resolving this is much appreciated.
-Neville
Could you provide an example for me to look at?
An iframe is just a window within a window, so if your iframe contains a document with tooltips then it should work. If you're trying to grab elements from within an iframe and hook tooltips from the parent document then I'm not sure.
I am trying to use Powertip with wysihtml5 which creates iFrames which are used to replace
If Powertip could display tips using relative positioning, then that should resolve this issue.
Powertip uses $(document), $(window) and $('body'). I'm guessing that $(window) would be the top level window, even when it was called inside an iFrame, but could be wrong. I don't yet understand enough about how iFrames work.
One solution would be to pass Powertip the location of the iFrame window and it could use that instead of assuming the window is at top=0, left=0.
Okay I created a test and can see what is going on. When trying to get the offset() of an element inside an iframe the values returned are relative to the element's owner document (in the iframe).
You said that using relative positioning would solve this issue, but I'm not following exactly what you mean. Using the CSS position: relative; wouldn't help. The tooltip element is a direct child of body, and it cannot be a child of the target element because not all HTML elements can have children (e.g. input, image). Even if it was a child the tooltip would become constrained by the iframe and would be clipped in unexpected places.
Unfortunately this is looking like a non-trivial issue to fix. If I could easily find the iframe element in the parent document it would be easy to add its position to the values returned from offset(), but I cannot figure out a good way to do that.
I'll keep looking, but right now I don't see any good way to handle elements in iframes.
@stevenbenner I have been working on this and making progress. I hope to get something wrapped up today, that meets my needs. I'll post again when I'm done.
@stevenbenner I've made the following updates to enable Powertip's to work inside iFrame's. I've only tested this where the tip element is inside an iFrame and the Tip itself is in the body of the parent document.
Also I'm only using manual tips, so there could be issues with non-manual tips. That said this should provide enough details to resolve any such issues.
I haven't forked the project so I can't issue Pull requests. You can download a zip file with the updated files from here The updates are based on the Github source files I downloaded today.
Source changes:
core.js
Added: options.iFrame
Moved: new TooltipController() after check for options.iFrame.
Pass options to initMouseTracking().
tooltipcontroller.js
Added: options.powerTipClose callback to hideTip().
Updated: closeDesyncedTip() to use new isMouseOverTip().
Updatd: getHtmlPlacement() to work with iFrames.
utility.js
Updated: initMouseTracking() to track tip located outside of iFrame.
Split: isMouseOver() up into isPosOver().
Added: isMouseOverTip().
options.iFrame is:
{ 'document': document, // iFrame document
'window': window, // iFrame window
'body': body, // Optional iFrame body. Specify this to add the Tip to the iFrame body, otherwise it uses the Parent's body.
'offset': { 'left': x, 'top': y } // Offset of the iFrame within the top level window.
}
options.powerTipClose enables a callback to used instead of the 'powerTipClose' event. This is useful where the tip is inside an iFrame and you can easily get access to events therein.
-Neville
Okay, I see. You're adding the iframe properties to an option when powerTip() is run and using that to adjust the position info. That makes sense, but it makes running PowerTip on elements within an iframe more technical that I would like.
I might be able to tweak your idea of tracking iframe info when powerTip() is called, but try to determine if one of the elements in the selector passed to jQuery is an iframe. If I can, then there will be no need for the extra options object. Unfortunately that is not as easy as it sounds.
I'll investigate if it is feasible to parse the selector and search for iframe elements.
@stevenbenner Keep in mind the optional requirement to have the tip itself in the body of the iFrame parent. This is needed when the iFrame window isn't very big. And also in the use case with wysihtml5, you don't want unwanted markup added to the body of the editor, as this would be saved as part of the editor content, unless it was explicitly deleted.
Hi :- ) I was just wondering if you make any progress on how to track iframe info when powerTip() is called? I try the above solution and did not work.
Some of my powerTip is not in the iframe page at all and it should work by default but did not without specified the iframe option.
I got this error: "Uncaught ReferenceError: options is not defined " $('.icon-question-sign').powerTip({ placement: 'e', mouseOnToPopup: true, smartPlacement: true });
I guess my goal is i have an iframe which display in a div pop up box outside the parent window. When user hover on "?" icon inside the iframe on the left of the pop up div box, i want the powerTip to show outside of the div pop up box overlapping if possible.
Right now, using the smartPlacement, it show the powerTip inside of the pop up box instead.
Hope i explain it somewhat clearly? Any pointers if this is doable? Thanks for your help :- )
@thomasjoyce I do have an update to the zip I posted above that I am using. It is based on PowerTip - v1.1.0 - 2012-10-15 so is behind the current release. Let me know if you'd like a copy.
Oh wow. Thanks :- ) I would love to have a copy to take a look at it. Feel free to send the zip to my email address: [email protected]
Thanks Neville. :- )
On Mon, Aug 12, 2013 at 2:32 PM, Neville Franks [email protected]:
@thomasjoyce https://github.com/thomasjoyce I do have an update to the zip I posted above that I am using. It is based on PowerTip - v1.1.0 - 2012-10-15 so is behind the current release. Let me know if you'd like a copy.
— Reply to this email directly or view it on GitHubhttps://github.com/stevenbenner/jquery-powertip/issues/40#issuecomment-22527256 .
@thomasjoyce Just to let you know what's happening on my end: I haven't had a chance to dig deeper into this yet. This is an edge-case request so it keeps getting prioritized low. So I'm still not sure if I can find a way to implement this that I'm happy with yet.
@nevf If you like, you can fork this project and rebase your fork back to v1.1.0 and commit your changes to that fork. I can then point anyone who needs <iframe> support in a hurry to your fork.
@stevenbenner I been facing excatly the same issue with iFrames.Powertips positions are going haywire inside iFrames .I see @nevf have made some progress and have some solution regarding the same.Please tell me what should I do at my end to enable the same .I am currently using the latest version of jQueryPowerToolTip i.e 1.2 v. Is there any workaround also which I can try to fix this solution like mentioned i earlier post , fetching the iFrame element, getting its position and adding the same in every element where powerTip is being attached ?Any help will be greatly appreciated since I already have been struggling with this issue since quite long.
Hi any help for to support powertooltip inside iFrames ? I am able to fetch iFrame offset as well as element's offset where powertip needs to be displayed.I added them and set powertip new offset to that value but it didnt work Here's my below code.Any help in this regard is appreciated : -
function computeFrameOffset(win, dims ) { dims = (typeof dims === 'undefined')?{ top: 0, left: 0}:dims; if (win !== top) { var rect = win.frameElement.getBoundingClientRect(); dims.left += rect.left; dims.top += rect.top; computeFrameOffset(win.parent, dims ); } return dims; };
var a = computeFrameOffset(document .getElementById("kc_widget_topic_TopicIFrameContainer_0") .getElementsByTagName("iframe")[0].contentWindow,undefined);
function powerToolTip(anchorNode , a) { var p2 = $(anchorNode).offset(); var calculatedOffSet = { top: p2.top + a.top, left: p2.left + a.left } $(anchorNode).powerTip({ placement : 'ne-alt', smartPlacement : true, mouseOnToPopup : true, //offset : calculatedOffSet offset : calculatedOffSet.top }); }
$('iframe').content().find('<YOUR_SELECTOR_GOES_HERE>').powerTip({}); should work nicely
Make sure powertip and jquery js exist in the document, not the iframe.
