Monday, June 22, 2009

clueTip zindex tip

OK, so the title isn't great, but that's what this is.

I had an issue where I'm using the clueTip jQuery plugin to show tooltips in my page. Everything was working great until I tried to show one inside of a dialog.

Even when I used the cluezIndex setting to show the tooltip and set the value to 3000 it wouldn't work.

$('a.toolTip').cluetip({cluezIndex: 3000, local: true, hidelocal: true, cursor: 'pointer', arrows: false, positionBy: 'mouse'});

After tracing through the code I found the problem. Once a tooltip is added to the page the cluezIndex value that it has stays the same, you can't change it with this setting.

For me, I made sure that all of my cluetip showings set the cluezIndex to 3000. Be sure to set the cluezIndex to a value that's higher than everything you want it to be above.

Tuesday, June 16, 2009

jQuery annoyances

Mostly I love jQuery, but there are few annoyances that I have struggled with.

Datepicker
  • I have not been able to bind a date picker to elements that are dynamically added to the page after load. This causes a problem.
  • The z-index did not allow the datepicker to show up on top of a dialog, I had to tweak the CSS to make that happen.

Dialog
  • My element is stripped from the location on the page and moved into the dynamically generated dialog html element. this causes inherited CSS settings to be lost and the layout within a dialog must be specifically set.
  • Building the same dialog multiple times puts multiple copies in the DOM instead of cleaning up itself.
  • .remove() removes the dialog from the DOM by completely destroying the HTML, but it also destroys my HTML that was ripped from another location on my page.
  • the maxHeight value is ignored when initially building a dialog, and I have to check the height and specifically fix it if it is too big.