Position of tooltips in grids when using Chrome - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: angular 2, drag and drop, jqxdragdrop

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

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

Author

Position of tooltips in grids when using Chrome Posts

May 11, 2017 at 11:23 am Position of tooltips in grids when using Chrome #93492

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.

May 11, 2017 at 11:38 am Position of tooltips in grids when using Chrome #93494

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

May 12, 2017 at 3:52 pm Position of tooltips in grids when using Chrome #93552

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>

May 15, 2017 at 1:29 pm Position of tooltips in grids when using Chrome #93600

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.

May 7, 2018 at 7:56 am Position of tooltips in grids when using Chrome #100087

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..

Author

Posts

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

You must be logged in to reply to this topic.