On Hover keep beauty tip open + Add documentation on limintations api

Yes, you're right these options would need custom handling in order to function as javascript. Unfortunately, I did not build that ability into the module, because i didn't like the idea of pasting js functions into php, unless necessary. My feeling is that if you need custom code running on preshow, or postshow, then it's best to just add your beautytips directly using the jquery plugin.

You can still use the beautytips module to set a default style, although, you would need to ensure that the beautytips js is added before yours.

If you post your code and what you're trying to accomplish, then we may be able to help work it out.

Yes good point, I should update this in the documentation.

I noticed in the code you posted that you were using your trigger for turning off the beautytip as 'click'. I am probably misunderstanding the issue you noted above, but just in case i'll mention that you can use different triggers to turn the beautytips off. (By default, it works turns on when a user hovers, and then turns off when they stop hovering over the item).

Ah, I see. That sounds like a good feature to add to beautytips. I'll change this to feature request.

thanks for the fix hefox. I'm a little confused though, where should I add your code too?

For anyone stuck at #8 looking for help, here is what I did.

Please note I an intermediate and just posting what helped me on my dev project (not test on production).

1. At admin/bt check
2. In your page.tpl.php file, in the head section please the following code:

<script>
$(document).ready(function(){
  //ADJUST FOR YOUR jQuery Selector
  $('a').bt({
   //HERE IS #5 hefox's code addition 
   trigger: ['mouseover','click'],
    postShow: function(box){
      $('.bt-content').bind('mouseleave',function() {
        $(box).hide();
      })
    },
    //COPIED FROM HULU STYLE
    fill: "#F4F4F4", 
    strokeStyle: "#666666", 
    spikeLength: 20, 
    spikeGirth: 10, 
    width: 350, 
    overlap: 0, 
    centerPointY: 1, 
    cornerRadius: 0, 
    cssStyles: { "fontFamily": "\"Lucida Grande\",Helvetica,Arial,Verdana,sans-serif", "fontSize": "12px", "padding": "10px 14px" }, 
    shadow: true, 
    shadowColor: "rgba(0,0,0,.5)", 
    shadowBlur: 8, 
    shadowOffset: 4, 
    shadowOffsetY: 4, 
    cssSelect: ".beautytips", 
    "list": [ "fill", "strokeStyle", "spikeLength", "spikeGirth", "width", "overlap", "centerPointY", "cornerRadius", "cssStyles", "shadow", "shadowColor", "shadowBlur", "shadowOffsetX", "shadowOffsetY"]
  });
});
</script>

Since BeuatifulTips javascript will be loaded on every page, you can add your own bt object to the page and customize it. #5 hefox's code works great for me by keeping the Tip open while user hovers over it.

Is there any issue for the feature of beauty tips while working on Internet Explorer. It works on Firefox. I have some issues with Internet Explorer.
Let me know how can I solve my problem :(
Thanks
custom essays

Thanks for the code snippet on hovering keeps beauty tip open.

But I wonder instead of mouseover, how can I use hoverIntent? When I replace hoverIntent with mousehover, it doesn't work in the desired way. The tooltip closes after a certain amount of time (timeout value for hoverIntent).

Using the code on #7, when the user hover out of tooltip, it closes fine. But when the user hovers over and then out actual target, the tooltip opens but not closes. Is there anyway to make tooltip close if the user hovers out the target?

This is my (quite pretty) solution for this behavior : keep the bt open on mouseover and hide on mouseleave but still using the default behavior when mouseleaving the showing tips element (like #15 wants to).

		<script type="text/javascript">
			var btRest;
			jQuery.bt.options.postShow = function(box){
				$('.bt-content').bind('mouseover',function() {
					btRest = true;
				});
				$('.bt-content').bind('mouseleave',function() {
					btRest = false;
					$(box).hide();
				});
			};
			jQuery.bt.options.hideTip = function(box){
				if (!btRest) {
					$(box).hide();
				}
			}
		</script>

It use a variable to define if the mouse is over the bt, if so, it stays showed, if not, it use the normal hide behavior defined in the admin.
If you use more than one bt on the same page maybe this behavior will affect all your bt. It's not my case so i don't knwo, you have to test.

I've tried using the examples in #10 and #16 with success in Firefox and other modern browsers. As several others mentioned above though, it does not work as desired in Internet Explorer (the tooltip disappears automatically after several seconds, no matter what I try, though it continues to work in non-IE browsers). The problem occurs in all versions of Internet Explorer up to and including IE9. I've tried including hoverIntent as well without successfully solving the issue (hoverIntent works as intended in modern browsers).

Has anyone solved this in such a way that it works as well in Internet Explorer?

After trying to make beautytips work correctly several hours, I couldn't manage it. Then, I tried a very similar library and it works for my purposes on most browsers: http://flowplayer.org/tools/tooltip/index.html

This library has no Drupal module, but it is relatively easy to add the code to a block or a view header, etc...

You can see an example usage here: http://itsme.eu/opleidingen/opleidingsschema

Here is the module for the above library: http://drupal.org/project/jquerytools

Here is a patch for beautytips-7.x-2.0-beta2. I made it after receiving many similar requests by email and on the issues list for Calendar Tooltips, which of course depends on Beautytips.

This patch adds a boolean option called "keepOpenWhenHovering", which triggers code I got from http://stackoverflow.com/questions/4034671/how-to-make-jquery-beauty-tip... . This code actually works in Internet Explorer. Since I removed an excess comma, it even works on IE6 :-)

The library mentioned in #18 and #19 looks nice btw...