jQWidgets Forums

This topic contains 7 replies, has 4 voices, and was last updated by Vivek 10 years, 11 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Adding jqxtooltip for each item in a list box Posts

April 23, 2013 at 10:40 pm Adding jqxtooltip for each item in a list box #19850

swells

Participant

Hello,

I can’t seem to figure out how to add a tooltip widget to each item in the listbox.

I added an ‘id’ tag for each item in the renderer (

label

), and then in the bindingComplete
event, I tried adding the following:

var items = $("#id_items_avail_select_listbox").jqxListBox('getItems');
	    $.each(items, function () {
	    	if (this.element == null) {
	    		var x  = 5;
	    	} else {
	    	var div_id = this.element.firstChild.id;
	    	
	    	$("#"+div_id).jqxTooltip({ content: '<b>Title:</b> <i>The Amazing Spider-man</i><br /><b>Year:</b> 2012', position: 'mouse', name: 'movieTooltip'});
	    	}	    	
	    });

The problem is that this.element can be null (having the var x = 5 line executed), and I don’t know why. Am I going about this wrong?

Thanks

-Scott

April 24, 2013 at 5:00 am Adding jqxtooltip for each item in a list box #19867

Dimitar

Participant

Hello Scott,

Here is how to achieve this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
                    "Caffé macchiato",
                    "Café mélange",
                    "Coffee milk",
                    "Cafe mocha",
                    "Cappuccino",
                    "Carajillo",
                    "Cortado",
                    "Cuban espresso",
                    "Espresso",
                    "Eiskaffee",
                    "The Flat White",
                    "Frappuccino",
                    "Galao",
                    "Greek frappé coffee",
                    "Iced Coffee",
                    "Indian filter coffee",
                    "Instant coffee",
                    "Irish coffee",
                    "Liqueur coffee"
		        ];
                // Create a jqxListBox
                $("#jqxWidget").jqxListBox({ selectedIndex: 3, source: source, width: 200, height: 250, theme: theme });
                $(".jqx-listitem-state-normal").jqxTooltip({ content: 'Tooltip.', position: 'mouse', name: 'listBoxTooltip', theme: theme });
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

April 29, 2013 at 2:13 pm Adding jqxtooltip for each item in a list box #20239

swells

Participant

Thank you, Dimitar! I will try this out.

May 10, 2013 at 2:28 pm Adding jqxtooltip for each item in a list box #20953

swells

Participant

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

May 10, 2013 at 6:55 pm Adding jqxtooltip for each item in a list box #20959

swells

Participant

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

May 13, 2013 at 2:29 pm Adding jqxtooltip for each item in a list box #21047

swells

Participant

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

November 14, 2013 at 6:09 am Adding jqxtooltip for each item in a list box #32606

rsalinas

Member

Hi swells, I don’t know if it’s too late for you but I think I solved your problem in a simpler way:

According to Dimitar, with the following code you add the tooltip to a ListBox element:

$(“.jqx-listitem-state-normal”).jqxTooltip({ content: ‘Tooltip.’, position: ‘mouse’, name: ‘listBoxTooltip’, theme: theme });

But as you said, this code just add the same tooltip to each element.

So I realized that you only had to change the jquery selector to include your Item ID, as in:

$(“.jqx-listitem-state-normal:has(#elementID1)”).jqxTooltip({ content: ‘This is a div element 1.’, position: ‘mouse’, theme: theme });
$(“.jqx-listitem-state-normal:has(#elementID2)”).jqxTooltip({ content: ‘This is a div element 2.’, position: ‘mouse’, theme: theme });

It worked to me.

Rodrigo Salinas.

July 15, 2014 at 12:09 pm Adding jqxtooltip for each item in a list box #57227

Vivek

Participant

Hi rsalinas,

According to your solution:-

I need to give id of each element, but i am just simply populating the listbox with the array of string called “source” as given by Dimitar in the very first example.

I want to ask what should i do in this case as i cant have multiple ids for array of strings

Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.