[swellsParticipant]

Okay, I think I have a solution, at least for now:

1) In the renderer function of the jqxtooltip, return a div with an id attribute containing the index parameter
of the renderer function.
2) Then, after I set up the listbox, I create and call the following function for the $(“.jqx-listitem-state-normal”).hover event:

function createToolTips(bUseAvailList) {
	$(".jqx-listitem-state-normal").hover(function(obj) {  //handlerIn function
                //<Code to retrieve the index number from the $(this).html>
                //<Using this index, I grab the node information from the datasource array>
		//<I assign categories and desc variables to their associative fields in the datasource array>
		
		var content = "<span style='font-weight:bold;'>"+desc+"</span><br />Categories: <span style='font-style:italic;'>"+categories+"</style>";
		//Add tooltip
		$("#"+id).jqxTooltip({ content: content, position: 'right', name: 'listBoxTooltip'});	
		$("#"+id).jqxTooltip('open');
		$f_curToolTip = $("#"+id);
	}, //End of hover handlerIn function
	function (obj) { //Now write handlerOut function	
		if (typeof $f_curToolTip !== 'undefined') {
			$f_curToolTip.jqxTooltip('destroy');
		}
	}  //End of hover handlerOut function
	); //End of hover function		
	return;
} //End of function createToolTips

This seems to work and make a good substitute until there’s a onHover or similar function in the widget.

-Scott

[swellsParticipant]

I tried iterating through each item in the list and creating a jqxTooltip for each (like this):

var items = $('#id_items_avail_select_listbox').jqxListBox('getItems');
$.each(items, function () {
	var categories = this.originalItem[f_selectDualListObj.categoriesField];
	var desc = this.originalItem[f_selectDualListObj.descField];
	var content = "<span style='font-weight:bold;'>"+desc+"</span><br />Categories: <span style='font-style:italic;'>"+categories+"</style>";
	$(this.element).jqxTooltip({ content: content, position: 'mouse', name: 'listBoxTooltip'});
});

This works, but only for the currently visible items in the list (the items that have $(this.element) set). When the list scrolls, the
tooltips aren’t updating so the tooltips shown are the ones for the original visible items.

Is there a way around this? I guess there’d have to be some built in widget event function, like onScroll
and a list of those elements currently shown or affected. Or maybe there’s a currently available way to do it :).

Any ideas?

Thanks!

-Scott

[swellsParticipant]

Hey, Dimitar!

Again, I appreciate the help, but your example sets the tooltip text the same for each item. What I need is the ability to
set the tooltip text differently for each individual item, depending on the item’s label.

I can set the Title of each item in the renderer function (see below), but I need to stylize the Title with HTML (bolds, s, etc.), and I
can’t do that in the Title attribute. That’s why I’d like to be able to create a tooltip for each item, since tooltips allow
for HTML.

renderer: function (index, label, value) 
{
	var datarecord = f_itemLists.availableItemsSubFiltered[index];
	var div_id = 'item_id_'+ datarecord[f_selectDualListObj.indexField];
	var div = '<div id="'+div_id+'" title="' + datarecord[f_selectDualListObj.descField] + '">' + label + '</div>';
	return div;
},

Any suggestions?

Thanks!

-Scott

[swellsParticipant]

Thank you, Dimitar! I will try this out.

[Author]

Posts