The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
Add Option for 'Append to BODY' element
| Project: | BeautyTips |
| Version: | 0.9.1 |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
Nice plug-in. However I found that it cannot be used when the target element is inside a container that the tip cannot break out of. I looked at the code and see that the tip-DIV is always appended to the offsetParent of the target element. This is limiting when used with widgets that use tightly fitting containers.
I attached a screenshot illustrating this - which was provided to me by another user.
I suggest that BT have an option to append its DIV to the BODY element instead of the offsetParent. The positioning calculations may have to be altered to accomodate this - eg: using .offset() instead of .position() to get the target's 'absolute position'.
By appending the tip-DIV to the BODY, you eliminate all overflow issues and gain compatibility with every plug-in, widget and layout. In fact, you may simply want to make this the default functionality. I cannot think of any advantage to putting the tip-DIV inside a container element insted of directly on the BODY?
Without this option, BT is not usable with any widget/layout that has the targets element inside a container with overflow:scroll or overflow:hidden. The tip will either be either truncated (overflow: hidden) or cause a scrollbar on the container (overflow: scroll/auto).
I hope this is useful. Keep up the great work.
/Kevin
| Attachment | Size |
|---|---|
| error.jpeg | 22.03 KB |
- Login to post comments
Comments
#1
Consider the following example (pseudo-code):
<body><div id="page-content" style="margin:0 auto; position:relative; width: 760px;">
content of the page goes here
<div class="bt-target-element" title="more information">click for more information</div>
more content
</div>
</body>
<script>$('.bt-target-element).bt({trigger: 'click'});</script>
In this example, the page content is centered vertically in the browser (much like the layout on the page you're reading right now). If the target element is clicked, the BeautyTip will appear and stay on the page. Because it is placed relative to the #page-content div, when the user resizes their browser, it will shift and move with the content of the page. If it was a child of the body of the page, it not move with the content.
I can see the case for what you're talking about, but in many cases, the trick will be to just change around the HTML/CSS some so that the positioning parent (a.k.a. offset parent) is outside of the cropping parent (a.k.a. overflow: hidden/scroll/auto).
If you are talking about using this for Google-style widgets, I don't know that you'll ever be able to solve this problem, because these widgets actually place their content inside of an iframe. And as a distinct HTML document, the body element is part of the iframe as well. So even attaching to the body would not solve the problem. You would need to attach to the iframe's parent body and (I could be wrong here) there may be some browser security issues which disallow this, especially when the iframe/widget content is coming from a separate site.
Anyway, I do think that there are some use cases for appending the BeautyTips to the body rather than the positioning parent. If anyone would like to submit a patch for this, I will certainly consider including this functionality.
#2
#3
One situation where you'd want the tooltip to attach to the body is combining tooltips with a carousel. All the carousels I've seen take something like this:
<div><ul>
<li><img /></li>
<li><img /></li>
</ul>
</div>
and do something like this to it:
<div style="overflow:hidden;position:relative;"><ul style="position:relative;">
<li style="float:left;"><img /></li>
<li style="float:left;"><img /></li>
</ul>
</div>
So... now if I wanted to add your beautytips to those images (and I DO), it does this:
<div style="overflow:hidden;position:relative;"><ul style="position:relative;">
<li style="float:left;"><img /></li>
<li style="float:left;"><img /></li>
<div id="bt-wrapper" style="position:absolute;...">tooltip here</div>
</ul>
</div>
And that tooltip gets mostly hidden because it's larger than the containing div element. This is a common case you can see on netflix (they combine a carousel with a larger popup), and I would think it would be desireable in a lot of situations.
Maybe better than appending the tooltip to the body would be the ability to specify which element to append the tooltip into. I'll take a look at doing this myself, but no promises.
#4
It was actually pretty easy once I understood the code a little better. The patch is attached.
I've added an option called "btParentNode" that you can set when creating your beautytips. This is the DOM node into which you would like to append the tooltip. It can be passed as a selector or an object. Word of warning... the element you are passing must have a relative or absolute position.
Examples...
$('#example').bt({btParentNode: 'body'
});
or
$('#example').bt({btParentNode: '#mainContentDiv'
});
or
var someEl = $('#mainContentDiv');$('#example').bt({
btParentNode: someEl
});
Let me know what you think.
#5
Love it! I've got it working and this feature will be part of the next release (probably sometime this week).
#6
I applied the patch to make it work with jCarousel. It kind of works, but the position of the tooltips is now completely off. It places them about 500px below the screen bottom (scrollbars increase, and you now see the tooltip when scrolling down completely).
I put the jCarousel inside a relatively positions #mediabar, and set btNodeParent to #mediabar.
What else to try too keep the correct location of the tooltips?
#7
Yes, I found an omission in the patch. However, I believe that I've got it working correctly and I'm about to do a new release of BeautyTips with this feature. Hopefully, I'll be able to get it out today. I'll Tweet it when it's up: http://twitter.com/jjeff and hopefully, I'll get a chance to blog the release: http://www.lullabot.com/lullablog
#8
Automatically closed -- issue fixed for two weeks with no activity.
#9
Jeff, I didn't realize that this was in 0.9.5 release candidate 1 as the offsetParent option. Once I figured that out it worked!