Right now, if a cluetip's activation is set to "click", click the target multiple times will cause a sticky cluetip alternately appear and disappear.

Hi,

I think this is more a design thing but I was wondering if you have a suggestion for this.

I really like this plug-in so I was doing several tests and this happened to me when I had a long list with one of the columns containing a hyperlink to open the tooltip. ClueTip was customized to show arrows. When I clicked on the last hyperlink, the tooltip appeared and the arrow was shown half "on the air".

It also happens if you go to the demo site and position the "jTip Style clueTip" link so it appears "glued" to the bottom of the page (last link in the page), then try to see the tooltip. Not a big problem for me but maybe for the design team.

Thanks a lot!

I have an element with a sticky cluetip with activation='click'. If I programmatically trigger the cluetip with $(cluetipped).click(), the event has no pageX/pageY values, so the waitImage is never visible and the final positioning is off.

It'd also be handy to have a manual "show" method, since the programmatic .click() is kind of hacky.

when using tool tip in a Click here to open page.html
after clicking on the anochor tag, it no longer navigates to the appropriate link.

I want to get the ClueTip title and content from the @title attribute of the anchor tag, so on hover to the anochor tag i can see the cluetip and on click i can open the page.

I am initiating the cluetip as below: on the $(document).ready()

$("a.clueTip").cluetip({ splitTitle: '|', tracking: true, positionBy: 'mouse'});

even on the documentation page mentioned on http://plugins.learningjquery.com/cluetip/demo/
under the 7th point of Default styles, it still doesn;t navigate the user to the appropriate href page.

I would like to have a clueTip on hover and still want to navigate to the page on click of the link

Please help me, and let me know whats wrong.

I know the workaround is to add an onclick event and navigate to the appropriate resource that i want. but i dont want it to be like that way.

Hi,

with enabled auto-width support, it would be practical to limit maximum width like this:

e.g.
width: -300,

(negative 300)
would mean that maximum allowed outer/inner layer width is 300px.
Idea taken from walter zorn's js tooltip.

regards
lubosdz

Hi!

Thanks for the improvements done to the Cluetip plug-in!

I've put it into an application. The problem that I have is that the structure for this application (which I cannot change) works with an iframe with the scrolling disabled (scrolling="no").

And the css it uses has the "html" and "body" with "overflow: hidden" so scrollbars don´t appear for the page.
Within the iframe, pages loaded have a div wrapping the content and this div has "overflow:auto" so scrollbars can be displayed this way.

When this happens, the cluetip window does not move along with the scrolling. I could reproduce this in a small test project.
But the cluetip window does move with "normal" scrolling (I mean, if the whole page has scrolling enabled or if the iframe has scrolling enabled instead of using the overflow in css to handle it).
I don´t know why this happens.

My question is, could there be any way to "workaround" it?

Thanks!

I use latest stable build of Google Chrome (7.0.517.44), and in demo page from your site (http://plugins.learningjquery.com/cluetip/demo/) it works fine. But, i've download cluetip 1.0.7, go to the demo folder, and this sample doesn't work. I've tryed use latest cluetip version 1.1 from github, but it doesn't work too )=

$.ajax(
url: '/Package/ViewPost',
type:'POST',
data: 'Test,
success: function(data) {
//Process data
},
error: function(error) { }
);

But it is not working .help me out form this.Give me a good example for this and also its code with Demo

Thanks a lot in advance

I'm using Cluetip and loading content via ajax, in IE I have to hover twice to get it to show and this only works with cache on.

The reason is around line 250-ish in the cluetip.js file, there is a line that says imgs[i].complete, this always returns false for me when testing in IE 8, in FF it works perfectly.

Also inside the bind 'load error' the imgCounter never decreses, so everything just stops there.

I had to comment out this, and just always show the cluetip.

Here's the hacked code:

                           for (var i = 0, l = imgs.length; i < l; i++) {
                                if (imgs[i].complete) {
                                    imgCount--;
                                }
                            }
                            if (1 = 0) {
                                if (imgCount && !$.browser.opera) {
                                    $(imgs).bind('load error', function () {
                                        imgCount--;
                                        if (imgCount < 1) {
                                            $cluetipWait.hide();
                                            if (isActive) { cluetipShow(pY); }
                                        }
                                    });
                                } else {
                                    $cluetipWait.hide();
                                    if (isActive) { cluetipShow(pY); }
                                }
                            }
                            // HACK
                            $cluetipWait.hide();
                            if (isActive) { cluetipShow(pY); }

Is this a bug or am I the only one experiencing this problem?

As I understand the functionality of item 7 from the demo (http://plugins.learningjquery.com/cluetip/demo/), hovering should invoke the tooltip and clicking the link should take me to the href url (http://www.learningjquery.com/). However, when I click on the link, nothing happens. I can right-click to go to the href link, but I can't get it to load directly. This appears to be true on FF 3.5 and IE8 on Windows 7. Can you confirm that my understanding of this functionality is correct, and the current behavior is a bug?

EDIT--Sorry, I just read the open issues and saw the clickThrough: true solution. I will implement that now. I would encourage you to make this the default behavior. Thanks for a great tool!

I am using the following code:

$('a.jt').cluetip({cluetipClass: 'rounded', arrows: true, dropShadow: false});

I do not get it to work the two properties together, can you help me?

adding:

$this.bind('mouseover.cluetip', function(event) {
$this.attr('title','');
}).bind('mouseleave.cluetip', function(event) {
$this.attr('title', $this.data('thisInfo').title);
});

to the "// activate by focus; inactivate by blur " section fixes the issue.

Hi.

Using IE9, one gets a jQuery Dom Exception: INVALID_CHARACTER_ERR (5).

This can be fixed by updating the bgiframe library to version 2.1.2.
https://github.com/brandonaaron/bgiframe/downloads

Line 200 currently reads:
cache: false, // force requested page not to be cached by browser

It probably should be:
cache: opts.ajaxCache, // force requested page not to be cached by browse

We changed this code for our Oracle Application Express to disable the &= feature when opts.ajaxCache = true otherwise it always has the &= option (&_= breaks Oracle Application Express's procedures).

When a css "cursor" value is set on an element, after the first cluetip activation, the "cursor" value is lost.

I traced the removal of CSS cursor value to:

// close cluetip and reset some things
var cluetipClose = function() {
$cluetipOuter
.parent().hide().removeClass();
opts.onHide.call(link, $cluetip, $cluetipInner);
$this.removeClass('cluetip-clicked');
if (tipTitle) {
$this.attr(opts.titleAttribute, tipTitle);
}
$this.css('cursor','');
if (opts.arrows) {
$cluetipArrows.css({top: ''});
}
};

I think it should be:

if (tipAttribute == $this.attr('href')) {
$this.css('cursor','');
}

This is because we only set the cursor in activate function when tipAttribute == $this.attr('href').

For this file :
http://github.com/kswedberg/jquery-cluetip/blob/master/jquery.cluetip.js (Version 1.1pre (May 16, 2010))

Line : 598

// beforeSend: function(ct, ci) { /* called first within default beforeSend callback }

Miss a */

Ex.: // beforeSend: function(ct, ci) { /* called first within default beforeSend callback */ }

It seems that positioning the cluetip using the TAB and ENTER keys (on hyperlinks), still depends on current mouse position in both IE7 and IE8. So if I put the mouse somewhere else on the page and open a cluetip using the keybord only, the cluetip appears on the position where the mouse cursor resides.

cluetip 1.1 - Test configuration used:
$('#clickme').cluetip({activation: 'click', positionBy: 'auto', splitTitle: '|', sticky: true});

Regards

Hi,
I'm using the Cluetip in a page inside the container which is having 50% width & has scroll with some height set. The problem is when you scroll down & activates the tooltip control, it scrolls to top of the container and the tooltip appears in between.

$.get('HotelPlans.html', function(html) {
var newHtml = $(html);
newHtml.appendTo('#ratebreakup');
newHtml.find('a.ratetooltip').cluetip({ attribute: href });
where HotelPlans.html is my html page

ratebreakup is my id

ratetooltip is my class name
This three thing is on other page...
Sending Request…
$.get('HotelPlans.html', function(html) { var newHtml = $(html); newHtml.appendTo('#ratebreakup'); newHtml.find('a.ratetooltip').cluetip({ attribute: href }); where HotelPlans.html is my html page #ratebreakup is my id ratetooltip is my class name This three thing is on other page...

Thanks in advance

I just figured out the hard way that when rel attributes with certain jQuery selectors are used to load local content from a page, cluetip fails to load the content on all but the first tip.

In my case, I am trying to create multiple tips on one page, each pointing to an

<li >Reference item one</li>
<li>Reference item two</li>
</ol>```

Here's my doc-ready code:
```$(document).ready(function() {
    $('.cluetip-reference').cluetip({arrows: true,dropShadow:true,cluetipClass:'jtip',local:true,hideLocal:false,multiple:true,showTitle:false});
});```

My workaround for now unfortunately has required me to add IDs to my ```<li>```'s, as simple css selectors in the del attribute don't seem to fail.

I have done but its not working in my form so what is the problem help me out from this

Hi,

many times, tooltip content has to be loaded from another element than <a href="" ... > link element (local: true). Unfortunatelly, it looks like in this case, loading the title from the element's title attribute is not supported.

Example:

I need to load title from the
<div id="tooltip-content" title="tooltip some title"> tooltip content</div>
Unfortunatelly, this does not work:

settings = {local:true,splitTitle:'|',};
$('#show-tooltip').cluetip($("#source-element").html(),settings);

Thank you.
Cheers
lubosdz

[code]a class="load-local" href="#loadme" rel="#loadme"[/code]

does not respect w3c recommandations using '#' in rel element.

Cheers

5 input fields on form, tabbing, setting focus sets the cluetip, but as u tab down, the cluetip remain next to first input field that had focus. Blur seems funcky

In cluetip 1.1.3:

   $link.bind('blur.cluetip', function(event) {
      $link.attr('title', $link.data('thisInfo').title);        //Bug: thisInfo never defined

should be:

   $link.bind('blur.cluetip', function(event) {
      $link.attr('title', $link.data('cluetip').title);         //Fixed: was thisInfo by error

Hi -

Within my code, I have the default clueTip definition, and a custom tip.

I modified the default tooltip to display a drop shadow in FireFox - and the code below works fine.

When I made the same changes to the custom tip the drop shadow doesn't work at all in the new tip.

Here are the pieces of code:
Found in the
$('.dspDetails').cluetip({
splitTitle: '|',
dropShadow: false,
showTitle: false,
positionBy: 'bottomTop',
topOffset: 15,
cursor: 'pointer',
width:300,
cluetipClass: 'details',
clickThrough: true
});

$('.infoTip').cluetip({
    splitTitle: '|', 
    dropShadow: false, 
    showTitle: false,
    positionBy: 'bottomTop', 
    topOffset: 15,
    cursor: 'pointer', 
    width:300,
    clickThrough: true
}); 

Found in the CSS:

.cluetip-default #cluetip-outer {
position: relative;
margin: 0;
background-color: #FF9;
border:1px solid #000;
font-family:Arial, sans-serif;
font-size:12px;
color:#000;
/* outline radius for mozilla/firefox only */

-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}

.cluetip-details {
position: relative;
margin: 0;
background-color: #FF9;
border:1px solid #000;
font-family:Arial, sans-serif;
font-size:12px;
color:#000;
text-align:left;
padding: 5px 5px 5px 15px;
/* outline radius for mozilla/firefox only */

-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}

Any and all response is appreciated.

Thanks.

See http://tony.onsharp.com/cluetip_test.html for details.

Hi,

it looks like the title is never hidden...?
I tried to turn it off via showTitle:false, since it cannot load title from another attribute than link's title, but it never disappears...

perhaps
$cluetipTitle.hide()
does not work well..?

regards
lubosdz

I tried to use options delayedClose together with sticky, as in: close the tooltip after 500ms when not in the tooltip. I don't want to have a close button. My version now looks like this:

if (opts.delayedClose > 0) {
          if (opts.sticky) {
              $this.bind('mouseenter', function() {
                  clearTimeout(closeOnDelay);
              }).bind('mouseleave', function() {
                  clearTimeout(closeOnDelay);
                  closeOnDelay = setTimeout(cluetipClose, opts.delayedClose);
              });
              $cluetip.bind('mouseenter', function() {
                clearTimeout(closeOnDelay);
              });
          } else {
              closeOnDelay = setTimeout(cluetipClose, opts.delayedClose);
          }
      }

There may have to be a check if the option mouseOutClose is set, too.

I can't get the dropshadow to work properly in IE8 and haven't seen a fix posted for this issue. When you initialize the dropShadow flag IE displays the shadow above the inner content div.

I've tried to tweak the z-index of the various divs, change background colors all to no avail. Any help would be appreciated.

Cheers!

   $.get('/path/to/file', function(html) {
  var newHtml = $(html);
  newHtml.appendTo('#some-elememnt');
  newHtml.find('a').cluetip();
});

I want an example for this.

Its very urgent

Thanks a lot.......

jQurey 1.6.0 introduced a backwards incompatibility in the use of .attr() and introducing .prop().

The patch below fixes all setings of properties through .prop( name, value) instead of through .attr().

Index: components/com_comprofiler/js/jquery-1.5.0/jquery.cluetip.js
===================================================================
--- jquery.cluetip.js   (revision 1509)
+++ jquery.cluetip.js   (working copy)
@@ -381,7 +381,7 @@
         var $localContent = $(tipAttribute + (/#\S+$/.test(tipAttribute) ? '' : ':eq(' + index + ')')).clone(true).show();
         if (opts.localIdSuffix) {
-          $localContent.attr('id', $localContent[0].id + opts.localIdSuffix);
+          $localContent.prop('id', $localContent[0].id + opts.localIdSuffix);
         }
         $cluetipInner.html($localContent);
         cluetipShow(pY);
@@ -445,7 +445,7 @@
       if (ctClass == 'rounded') {
         dynamicClasses += ' ui-corner-all';
       }
-      $cluetip.css({top: tipY + 'px'}).attr({'className': standardClasses + dynamicClasses});
+      $cluetip.css({top: tipY + 'px'}).prop({'className': standardClasses + dynamicClasses});
       // set up arrow positioning to align with element
       if (opts.arrows) {
         var bgY = (posY - tipY - opts.dropShadowSteps);
@@ -492,7 +492,7 @@
       opts.onHide.call(link, $cluetip, $cluetipInner);
       $link.removeClass('cluetip-clicked');
       if (tipTitle) {
-        $link.attr(opts.titleAttribute, tipTitle);
+        $link.prop(opts.titleAttribute, tipTitle);
       }
       $link.css('cursor','');
       if (opts.arrows) {
@@ -521,11 +521,11 @@
   // activate by focus; inactivate by blur
       } else if (opts.activation == 'focus') {
         $link.bind('focus.cluetip', function(event) {
-          $link.attr('title','');
+          $link.prop('title','');
           activate(event);
         });
         $link.bind('blur.cluetip', function(event) {
-          $link.attr('title', $link.data('cluetip').title);
+          $link.prop('title', $link.data('cluetip').title);
           inactivate(event);
         });
   // activate by hover
@@ -565,9 +565,9 @@
         }

         $link.bind('mouseover.cluetip', function(event) {
-          $link.attr('title','');
+          $link.prop('title','');
         }).bind('mouseleave.cluetip', function(event) {
-          $link.attr('title', $link.data('cluetip').title);
+          $link.prop('title', $link.data('cluetip').title);
         });
       }
     });

My html code is as follows:

I am loading external html "ajax6.htm" in cluetip. This is working fine for very first link, but not work for 2nd anchor tag.

Please provide solution asap

Problem One

1. Go here... http://plugins.learningjquery.com/cluetip/
2. Click on menu tab 2 called "Demo"...
3. Result: You get an Alert box saying, "There is no such container."
4. Click "OK" button and proceed to demo page.

...continue for Problem Two...

1. Scroll down to bottom of Demo page.
2. Go to "Rounded Corners Theme" section.
3. Go to Item 4 called "non-caching ajax clueTip with arrows enabled"... enable what arrows?
4. Hover over item as mentioned and I do not see any arrows in Safari or Firefox... don't know about IE.

...continue for Problem Three...

1. On Demo page, instead of hover, simply click on any link and you're taken to a new page in the same window containing the text of the tip. These links are for hovering, shouldn't the click be disabled?

If use activation: 'click' setting, the default tooltip still activated by mouse hover and show title content "|xxxx..." with separator.

I am using 1.0.7, line 79 looks like this:
if (opts.local && opts.hideLocal) { $(tipAttribute + ':first').hide(); }
The tipAttribute is blank and thus hides entire document when rel attribute is not set. I fixed it like this:
if (opts.local && opts.hideLocal && tipAttribute != '') { $(tipAttribute + ':first').hide(); }
Firefox works fine, and I saw the error in IE and Chrome.

The setup object is never used when inserting/creating the cluetip div:

    /* clueTip setup
     *  the setup options are applied each time .cluetip() is called,
     *  BUT only if <div id="cluetip"> is not already in the document
    */
    setup: {
      // method to be used for inserting the clueTip into the DOM.
      // Permitted values are 'appendTo', 'prependTo', 'insertBefore', and 'insertAfter'
      insertionType: 'appendTo',
      // element in the DOM the plugin will reference when inserting the clueTip.
      insertionElement: 'body'
    },

The following lines use the options object rather than the setup object...

    /** =create cluetip divs **/
    var insertionType = (/appendTo|prependTo|insertBefore|insertAfter/).test(options.insertionType) ? options.insertionType : 'appendTo',
        insertionElement = options.insertionElement || 'body';

Strange issue here.
Everything goes right with Firefox.
But in IE, when I invoke an ajax php file with ClueTip, the file is loaded again and again twice per second.
You can't notice it unless you have animated gif in the file, or unless you stick the clueTip, so that you see the "Close" text appending again and again, which makes it appear many times.

Hi,

I'm using cluetip with these settings:

$(document).ready(function () {
$('a.header').cluetip({
showTitle : false,
cluetipClass: 'jtip',
arrows: false,
dropShadow: true,
hoverIntent: false,
sticky: true,
mouseOutClose: true,
closePosition: 'title',
closeText: 'x',
local: true,
hideLocal: true,
topOffset: 8,
leftOffset: 5,
width: 100
});
});

The problem is that the tooltip sticks, and as soon as hover off the link, and hover on the same link again, the content in the cluetip is duplicated. I worked around the issue with this option now:

onActivate: function (e) { $("#cluetip-inner").html(''); return true; }

Thanks for an otherwise excellent control :)

Hi all,

I would like suggest to remove the linkWidth in the calculation of posX as follows:

// position clueTip horizontally
if (opts.positionBy == 'fixed') {
posX = linkLeft + lOffset;
$cluetip.css({ left: posX });
}

or make it more flexible.

Brgrds,

i need to get cluetip activated when a link, that is appended to body after an ajax request, clicked. how can i get it working?

I have just updated cluetip from 1.1pre (2010-10-20) to version 1.2
and this piece of code stop working:

      $(".title").each( function () {

        var val1 = $(this).attr("name").toString().split("-")[0];
        var val2 = $(this).attr("name").toString().split("-")[1];

        $(this).attr("rel",   host + "cluetip.php").cluetip({

            arrows: true,
            cluetipClass: 'jtip',
            width: '250px',
            dropShadowSteps:  4,
            ajaxSettings : {
                 type : "GET",
                 data : "val1=" + val1 + "&val2=" + val2
            },
            ajaxProcess : function (data) {
                 return data;
            }

        });

      });

The cluetip not showing up, other tips are working ok, only that above not (I have jquery 1.6.2 btw)
Can anyone know why this happened?

When I load content via ajax . Content don't display in tip area in ie6 browse. Other browse work well.
$('#change_smile').cluetip({
local:false,
positionBy:'bottomTop',
arrows: true,
cursor: 'pointer',
sticky: true,
closePosition: 'title', // location of close text for sticky cluetips; can be 'top' or 'bottom' or 'title'
closeText: '',
dropShadow: true,
hoverIntent: false,
activation: 'click',
width:'236px'
});

In my cluetip I have a bit of hidden text that can be shown (JQuery's slideToggle) with a mouse click. In Chrome and Firefox, the box resizes nicely when the hidden text is revealed. In IE 8, however, the cluetip sticks to its original size.

Hi,

to auto-expand outer layer (#cluetip-outer) according to the content loaded inside (#cluetip-inner),
add following CSS into #cluetip-outer class:

display: inline-block;

This will make outer layer auto-adjust according to the width of the loaded inner layer.
Tested on FF3.5, O10, IE8.

In this case, however, shadow should expand to the width of the #cluetip-outer, not #cluetip-inner.

Cheers
lubosdz

Hello -

I am using Ingrid (jQuery plugin) and clueTip on my pages.

On initial page load, Ingrid loads as part of the page, creates a table with a thead and a tbody.

The thead has tool tips coded into each column header title.

When a column is resorted, Ingrid's design only pulls back and updates the tBody section, so that it doesn't worry about updating the thead section.

The column that was resorted, loses the TITLE tooltip information. The other tooltips remain, but the one selected disappears.
When examined through Firebug, only the content of the grid is being passed.

What is happening with the tool tip?

Thanks.

The following code:

<div title="This is simply a test">mouse over me for tip</div>

and then in jquery

$('div[title]').cluetip({ showTitle: false, attribute: 'title', local:true });

The title is not displayed as the tooltip.

Around line 260 add a check for this scenario
/***************************************
* load an element from the same page
**************************************/
} else if (opts.local) {
/ not showing title, no split title, attribute set and not a id: show attribute text as body
* example of this would be

I believe this line:
$cluetip.css({top: tipY + 'px'}).attr({'className': standardClasses + dynamicClasses});

should be:
$cluetip.css({top: tipY + 'px'}).attr({'class': standardClasses + dynamicClasses});

Line 438 in current revision:
https://github.com/kswedberg/jquery-cluetip/blob/master/jquery.cluetip.js#L438

Currently it results in adding a classname attribute to the DOM element rather than class. I was having issues with the arrows not appearing and this turned out to be the cause.

Hi,

Thanks for jquery-cluetip !

I am using it in an ajax application, so adding and removing cluetips many times. The problem is that ClueTip is not removing its hideCluetip event on the document when a cluetip is destroyed.
It ends having many useless hideCluetip events who will never be unbinded, unless reloading the full page...

Here is the guilty line :
$(document).bind('hideCluetip', function(e) {
cluetipClose();
});

I propose this instead (untested) :
var __doc_handler = function(e) {
cluetipClose();
}
$(document).bind('hideCluetip', __doc_handler);
$this.bind('remove', function () {
$(document).unbind('hideCluetip', __doc_handler);
})

Then we just have to do the following the remove the event (it is done automatically by jQuery UI) :
$('#my_tip').triggerHandler('remove')

//activate clueTip
....
linkTop = posY = $link.offset().top;
linkLeft = $link.offset().left;
mouseX = event.pageX; // BUG: undefined/unrelated with a tabbing between fields without mouse click......
mouseY = event.pageY;

should be:

  linkTop = posY = $link.offset().top;
  linkLeft = $link.offset().left;

//FIX:
linkWidth = $link.innerWidth(); //Fix of old bug 4412
if ( (event.type) == focus ) {
// in focus event, no mouse position is available this is needed with bottomTop:
mouseX = linkLeft + ( linkWidth / 2 ) + lOffset;
$cluetip.css({left: posX});
mouseY = posY + tOffset;
} else {
mouseX = event.pageX;
mouseY = event.pageY;
}
//END OF FIX