better higher tooltip position

Author: ivosdc

dist/build/crud-table.js

@@ -1855,8 +1855,8 @@
 
     	element.style.zIndex = (10000).toString();
     	targetElem.appendChild(element);
-    	element.style.top = event.pageY - window.scrollY - element.clientHeight / 2 - y + "px";
-    	element.style.left = event.pageX - window.scrollX - element.clientWidth / 2 - x + "px";
+    	element.style.top = event.pageY - window.scrollY - element.clientHeight - y + "px";
+    	element.style.left = event.pageX - window.scrollX - element.clientWidth / 2 + x + "px";
 
     	targetElem.addEventListener("mouseleave", e => {
     		if (element.parentNode === targetElem) {
@@ -1867,7 +1867,7 @@
 
     function showTooltipByConfig(event, show, text, type) {
     	if (show) {
-    		tooltip(event, 0, 0, text, type);
+    		tooltip(event, 0, 15, text, type);
     	}
     }
 
@@ -2019,7 +2019,7 @@
     	const click_handler = (elem, e) => handleSort(elem.name, e);
 
     	const mouseenter_handler = (elem, e) => {
-    		tooltip(e, 0, 12, elem.description);
+    		tooltip(e, 0, 15, elem.description);
     	};
 
     	const mouseenter_handler_1 = (column_order, i, e) => {

dist/build/crud-table.mjs

@@ -1849,8 +1849,8 @@ function tooltip(event, x, y, text, type) {
 
 	element.style.zIndex = (10000).toString();
 	targetElem.appendChild(element);
-	element.style.top = event.pageY - window.scrollY - element.clientHeight / 2 - y + "px";
-	element.style.left = event.pageX - window.scrollX - element.clientWidth / 2 - x + "px";
+	element.style.top = event.pageY - window.scrollY - element.clientHeight - y + "px";
+	element.style.left = event.pageX - window.scrollX - element.clientWidth / 2 + x + "px";
 
 	targetElem.addEventListener("mouseleave", e => {
 		if (element.parentNode === targetElem) {
@@ -1861,7 +1861,7 @@ function tooltip(event, x, y, text, type) {
 
 function showTooltipByConfig(event, show, text, type) {
 	if (show) {
-		tooltip(event, 0, 0, text, type);
+		tooltip(event, 0, 15, text, type);
 	}
 }
 
@@ -2013,7 +2013,7 @@ function instance($$self, $$props, $$invalidate) {
 	const click_handler = (elem, e) => handleSort(elem.name, e);
 
 	const mouseenter_handler = (elem, e) => {
-		tooltip(e, 0, 12, elem.description);
+		tooltip(e, 0, 15, elem.description);
 	};
 
 	const mouseenter_handler_1 = (column_order, i, e) => {

dist/crud-table-config-html.js

@@ -21,7 +21,7 @@ genericCrudTable.setAttribute('table_data', JSON.stringify(myData));
 
 genericCrudTable.addEventListener('create', () => {
     console.log('create');
-    myData.unshift({name: 'A_NEW', job: 'none', private: 'set hard', html: 'a <b>b</b> <i>c</i>'});
+    myData.unshift({id: Date.now().toString(), name: 'A_NEW', job: 'none', private: 'set hard', html: 'a <b>b</b> <i>c</i>'});
     refresh();
 });
 

dist/test-data.js

@@ -1,6 +1,6 @@
 {
   "name": "svelte-generic-crud-table",
-  "version": "1.5.75",
+  "version": "1.5.76",
   "description": "<crud-table> renders object-arrays with options-panel and inline edit per row. Dispatches events for ongoing data handling. As self-containing webcomponent or for Svelte in 60KB",
   "main": "dist/build/crud-table.js",
   "module": "dist/build/crud-table.mjs",

package.json

@@ -202,8 +202,8 @@
         }
         element.style.zIndex = (10000).toString();
         targetElem.appendChild(element);
-        element.style.top = (event.pageY - window.scrollY - (element.clientHeight / 2) - y) + 'px';
-        element.style.left = (event.pageX - window.scrollX - (element.clientWidth / 2) - x) + 'px';
+        element.style.top = (event.pageY - window.scrollY - element.clientHeight - y) + 'px';
+        element.style.left = (event.pageX - window.scrollX - (element.clientWidth / 2) + x) + 'px';
         targetElem.addEventListener('mouseleave', e => {
             if (element.parentNode === targetElem) {
                 targetElem.removeChild(element);
@@ -213,7 +213,7 @@
 
     function showTooltipByConfig(event, show, text, type) {
         if (show) {
-            tooltip(event, 0, 0, text, type)
+            tooltip(event, 0, 15, text, type)
         }
     }
 
@@ -238,7 +238,7 @@
                              on:mouseup={stopResize}>
                             <span aria-label="Sort{elem.name}"
                                   on:click={(e) => handleSort(elem.name, e)}
-                                  on:mouseenter={(e)=>{tooltip(e, 0, 12, elem.description)}}>
+                                  on:mouseenter={(e)=>{tooltip(e, 0, 15, elem.description)}}>
                                 {genericCrudTable.makeCapitalLead(elem.name)}
                             </span>
                         </div>