Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder levani's Avatar
    Join Date
    Mar 2009
    Location
    Georgia
    Posts
    183
    Thanks
    29
    Thanked 1 Time in 1 Post

    Close cluetip when the mouse is out of link

    I there an option to close cluetip when the mouse is of from the link? There is mouseOutClose option but it doesn't close cluetip if you don't hover the cluetip itself first. The problem is caused by the sticky option set to true but I can't make it false because I need to keep cluetip opened if the mouse is over the cluetip box itself.

    cluetip can be closed using $(document).trigger('hideCluetip'); function so I tried adding onmouseout="$(document).trigger('hideCluetip');" but it closes cluetip even the mouse is over the cluetip itself...

    Plugin page:
    http://plugins.learningjquery.com/cluetip/demo/

    Any ideas?

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    You should have specified the library/framework. I see it is JQuery. Ok, I'll move the thread to the proper subForum
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Regular Coder
    Join Date
    Jan 2009
    Posts
    193
    Thanks
    0
    Thanked 20 Times in 20 Posts
    What is your javascript and html?

  • #4
    Regular Coder levani's Avatar
    Join Date
    Mar 2009
    Location
    Georgia
    Posts
    183
    Thanks
    29
    Thanked 1 Time in 1 Post
    This is the HTML code:
    Code:
    <a class="jt" href="ajax6.htm" rel="ajax6.htm" title="jTip Style!">
    This is javascript:
    Code:
    $('a.jt:eq(0)').cluetip({
      cluetipClass: 'jtip', 
      arrows: true, 
      dropShadow: false,
      hoverIntent: false,
      sticky: true,
      mouseOutClose: true,
      closePosition: 'title',
      closeText: '<img src="cross.png" alt="close" />'
    });
    And the cluetip core code of course:
    http://github.com/kswedberg/jquery-c...ery.cluetip.js

    Any ideas?

  • #5
    Regular Coder
    Join Date
    Jan 2009
    Posts
    193
    Thanks
    0
    Thanked 20 Times in 20 Posts
    It is probably because you have sticky set to true.

    Code:
    sticky: true
    Which means to leave the tip open even if you mouse out. The user has to manually close it by clicking a button. So you probably need to remove that or set it to false.

  • #6
    Regular Coder levani's Avatar
    Join Date
    Mar 2009
    Location
    Georgia
    Posts
    183
    Thanks
    29
    Thanked 1 Time in 1 Post
    I can't make it false because in this case it would be imposible to click some links inside the cluetip as it would dissapear as soon as the mouse is out of the link.

  • #7
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    I use this plugin and I had this very same issue. The way I resolved it is I set the X and Y offsets so when the cluetip box appears, it covers the link that activates the hover. That way, when the box appears, the mouse cursor is already inside the box, so the mouse cursor can only exit the box which will close it. Sticky has to be off of course.

  • #8
    Regular Coder
    Join Date
    Jan 2009
    Posts
    193
    Thanks
    0
    Thanked 20 Times in 20 Posts
    Can you do something like this after your javascript for your cluetip class?

    What the code below should do is attach a on mouseout event to the cluetip div and tell it to hide the div.
    Code:
     $(document).ready(function(){
        $('#cluetip').mouseout(function() {
               $(this).hide();
         });
    
     });


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •