jQuery UI Widgets Forums Grid Position of tooltips in grids when using Chrome

This topic contains 4 replies, has 3 voices, and was last updated by  shradha 2 years, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • michaelstegner
    Participant

    I have an issue with tooltips in grids. I have grids with rowdetails for each line.
    In this rowdetails are tooltips. This works fine in Internet explorer and Firefox. But in Chorme (Version 58.0.3029.96) the position of the tooltip is often off. In the first few lines the tooltip is usually in the right place. But the more you go down the more the tooltip is off.
    I made a script to demonstrate the problem.

    <!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>
    		<title>Test Grid</title>
    		
    		<link rel="stylesheet" href="/js/jqwidgets/styles/jqx.base.css?version=20170323" type="text/css" />
    
    		<script type="text/javascript" src="/js/jqwidgets/jqxcore.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxdata.js?version=20170323"></script> 
    		<script type="text/javascript" src="/js/jqwidgets/jqxbuttons.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxscrollbar.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxmenu.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxcheckbox.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxlistbox.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxdropdownlist.js?version=20170323"></script>		 
    		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.sort.js?version=20170323"></script> 
    		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.filter.js?version=20170323"></script> 
    		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.pager.js?version=20170323"></script> 
    		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.columnsresize.js?version=20170323"></script> 
    		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.edit.js?version=20170323"></script> 
    		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.selection.js?version=20170323"></script> 
    		<script type="text/javascript" src="/js/jqwidgets/jqxdatatable.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxtreegrid.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxdragdrop.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxnotification.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxdatetimeinput.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxcalendar.js?version=20170323"></script>
            <script type="text/javascript" src="/js/jqwidgets/jqxprogressbar.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.grouping.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.columnsreorder.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxdocking.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxwindow.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxmaskedinput.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxinput.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxnumberinput.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxtooltip.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxtextarea.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/globalization/globalize.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/localization.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxdata.export.js?version=20170323"></script> 
    		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.export.js?version=20170323"></script> 
    		<script type="text/javascript" src="/js/jqwidgets/jqxcombobox.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxnavigationbar.js?version=20170323"></script>
    
    		<script type="text/javascript">
    		
    			function widget_info_init()
    			{
    				
    				
    				
    				$('.widget-info').each(function(){
    					
    					var element = $(this);
    					var tagID = element[0].id;
    					var uuid = tagID.replace("widget-info-","");
    					
    					var content = $('#widget-info-content-'+uuid).html();
    					var left = false;
    					if( $(this).attr('left') )
    					{
    						left = $(this).attr('left')
    					}
    					var position = 'mouse';
    					if( $(this).attr('position') )
    					{
    						position = $(this).attr('position')
    					}
    					$(this).jqxTooltip({ content: content, position: position, name: tagID, left: left, width: 400});
    
    				});
    
    			}
    		
            $(document).ready(function () {
                // prepare the data
                var data = new Array();
                var firstNames =
                [
                    "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
                ];
                var lastNames =
                [
                    "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
                ];
                var productNames =
                [
                    "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
                ];
                var priceValues =
                [
                    "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
                ];
                for (var i = 0; i < 200; i++) {
                    var row = {};
                    var productindex = Math.floor(Math.random() * productNames.length);
                    var price = parseFloat(priceValues[productindex]);
                    var quantity = 1 + Math.round(Math.random() * 10);
                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                    row["productname"] = productNames[productindex];
                    row["price"] = price;
                    row["quantity"] = quantity;
                    row["total"] = price * quantity;
                    data[i] = row;
                }
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'total', type: 'number' }
                    ]
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
    			
    			var initrowdetails = function (index, parentElement, gridElement, datarecord) {
    
    			
                    tabsdiv = $($(parentElement).children()[0]);
    				
                    if (tabsdiv != null) {			
    					
    					
    					information = tabsdiv.find('.information');
    					//alert('<div class="widget-info" id="widget-info-test-'+index+'">infotext</div>'); 
    					$(information).html('Some Text   <br /><br />'+
    					' <br /> <table><tr><td>table </td>  <td>to</td> </tr><tr><td>show </td>  <td>stuff</td> </tr></table> <br />'+
    					
    					'<div class="widget-info" id="widget-info-test-'+index+'">Move mouse here to show tooltip</div><span id="widget-info-content-test-'+index+'" style="display: none; visibility: hidden;"> hello world '+index+'</span>'); 
    					widget_info_init();
    				
    				}
    				var position = $('#jqxgrid').jqxGrid('scrollposition');	
    				$('#jqxgrid').jqxGrid('scrolloffset', position.top+200 , position.left);
    				
    				//$("#"+$('#jqxgrid').jqGrid('getGridParam','selrow')).focus();	
    			}
    			
    			
                $("#jqxgrid").jqxGrid(
                {	
                    width: 850,
    		autoheight : true,
    		rowsheight: 40,
                    source: dataAdapter,
                    sortable: true,
                    filterable: false,	
    		enabletooltips: true,
                    rowdetails: true,
    				rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><div class='information'></div></div>", rowdetailsheight: 350 },
    				initrowdetails: initrowdetails,
    				localization: getLocalization('de'),
                    columns: [
    						{ text: 'Firstname', datafield: 'firstname', width: 400  },
    						{ text: 'Lastname', datafield: 'lastname', width: 400  },
    
    					],
    					ready: function() {
    							$("#jqxgrid").jqxGrid('showrowdetails', 0);
    					}
    
    			});
    
    		});
    		
    		
    		</script>
    
    	</head>
    	<body>
    		<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    			<div id="jqxgrid"></div>
    		</div>	
    	
    	</body>
    </html>
    

    Is this a known bug? Please help me to find a solution to this problem.


    Peter Stoev
    Keymaster

    Hi michaelstegner,

    The Grid’s built-in tooltips are the web browser’s tooltips. In the example code you shared, you use jqxTooltip and the positioning of that tooltip depends only on its settings. Tooltips are with Absolute positioning. I think you use Relative positioning as that’s what the $(this).attr(‘position’) returns.

    Regards,
    Peter


    michaelstegner
    Participant

    I’m sorry but this is not the solution to the problem. In the example the ‘position’ attribute is never set so the value is always ‘mouse’. But I should cut the part out to avoid irritation. I tried to dense my script down and avoid any unnecessary code.
    I also noticed the Problem only starts after you scrolled the window don a bit. As long as you are in the initially visible area there is no problem. So I added DIV-element you have to scroll past before the Grid gets visible.

    It works fine in Firefox and IE. It doesn’t in Chrome.

    <!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>
    		<title>Test Grid</title>
    		
    		<link rel="stylesheet" href="/js/jqwidgets/styles/jqx.base.css?version=20170323" type="text/css" />
    
    		<script type="text/javascript" src="/js/jqwidgets/jqxcore.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxdata.js?version=20170323"></script> 
    		<script type="text/javascript" src="/js/jqwidgets/jqxbuttons.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxscrollbar.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxmenu.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.sort.js?version=20170323"></script> 
    		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.filter.js?version=20170323"></script> 
    		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.pager.js?version=20170323"></script> 
    		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.columnsresize.js?version=20170323"></script> 
    		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.edit.js?version=20170323"></script> 
    		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.selection.js?version=20170323"></script> 
    		<script type="text/javascript" src="/js/jqwidgets/jqxtooltip.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/globalization/globalize.js?version=20170323"></script>
    		<script type="text/javascript" src="/js/jqwidgets/localization.js?version=20170323"></script>	
    		<script type="text/javascript" src="/js/jqwidgets/jqxnavigationbar.js?version=20170323"></script>
    		<script type="text/javascript">
    		
            $(document).ready(function () {
                // Just some demo Data
                var data = new Array();
    
    			var row = {};
    			row["firstname"] = 'Andrew';
    			row["lastname"] = 'Fuller';
    			data[0] = row;
    			var row = {};
    			row["firstname"] = 'Nancy';
    			row["lastname"] = 'Burke';
    			data[1] = row;
    			var row = {};
    			row["firstname"] = 'Shelley';
    			row["lastname"] = 'Murphy';
    			data[2] = row;
    			var row = {};
    			row["firstname"] = 'Andrew';
    			row["lastname"] = 'Murphy';
    			data[3] = row;
    			var row = {};
    			row["firstname"] = 'Nancy';
    			row["lastname"] = 'Fuller';
    			data[4] = row;
    			var row = {};
    			row["firstname"] = 'Shelley';
    			row["lastname"] = 'Burke';
    			data[5] = row;
    			
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
    
                    ]
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
    			
    			// Render the rowdetails
    			var initrowdetails = function (index, parentElement, gridElement, datarecord) {
    
    			
                    tabsdiv = $($(parentElement).children()[0]);
    				
                    if (tabsdiv != null) {			
    					
    					
    					information = tabsdiv.find('.information');
    					// just some Text so there is a little bit of content
    					$(information).html('Some Text   <br /><br />'+
    					' <br /> <table><tr><td>table </td>  <td>to</td> </tr><tr><td>show </td>  <td>stuff</td> </tr></table> <br />'+
    					// this is the DIV that gets the tooltip
    					'<div class="widget-info" id="widget-info-test-'+index+'">Move mouse here to show tooltip</div><span id="widget-info-content-test-'+index+'" style="display: none; visibility: hidden;"> hello world '+index+'</span>'); 
    
    					// Add tooltip
    					var element = $('#widget-info-test-'+index);
    					var tagID = element[0].id;
    					var uuid = tagID.replace("widget-info-","");
    					var content = $('#widget-info-content-'+uuid).html();
    					var left = false;
    					var position = 'mouse'; // postion is always mouse
    
    					$(element).jqxTooltip({ content: content, position: position, name: tagID, left: left, width: 400});
    
    				
    				}
    				var position = $('#jqxgrid').jqxGrid('scrollposition');	
    				$('#jqxgrid').jqxGrid('scrolloffset', position.top+200 , position.left);
    				
    				//$("#"+$('#jqxgrid').jqGrid('getGridParam','selrow')).focus();	
    			}
    			
    			
                $("#jqxgrid").jqxGrid(
                {	
                    width: 850,
    				autoheight : true,
                    source: dataAdapter,
                    rowdetails: true,
    				rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><div class='information'></div></div>", rowdetailsheight: 250 },
    				initrowdetails: initrowdetails,
    				localization: getLocalization('de'),
                    columns: [
    						{ text: 'Firstname', datafield: 'firstname', width: 400  },
    						{ text: 'Lastname', datafield: 'lastname', width: 400  },
    
    					],
    					ready: function() {
    							$("#jqxgrid").jqxGrid('showrowdetails', 0);
    					}
    
    			});
    
    		});
    		
    		
    		</script>
    
    	</head>
    	<body>
    		<div style="height : 1000px; border: solid red 1px;">
    			A big DIV to force you to scroll down <br />
    			Grid is below 
    		</div>
    		<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    			<div id="jqxgrid"></div>
    		</div>	
    	
    	</body>
    </html>
    

    michaelstegner
    Participant

    Hello,

    I Think if found the source of the issue. In jqxtooltip.js you are using document.documentElement.scrollTop to calculate the Tooltips position. The value is always 0 in Chrome.

    So to fixed the problem I replaced

    this.documentTop = document.documentElement.scrollTop,

    whit

    this.documentTop = (document.documentElement.scrollTop > 0 ? document.documentElement.scrollTop : (document.body.scrollTop > 0 ? document.body.scrollTop : window.pageYOffset ) ),

    I’m not sure if this is the best solution but the tooltips are no longer in the wrong position.
    I hope this will help you.


    shradha
    Participant

    hie,
    can you please help me with this.
    i have used your example of jqxDragDrop in angular ,
    as i want to drag drop the products into 2 grids how can i do that..

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

You must be logged in to reply to this topic.