(core) Add overflowTooltip() tool, and use for long tables in widget picker, and long page names.

Summary:
Usage is simply to call `overflowTooltip()` with no arguments, as an argument
to an element whose text may overflow. On 'mouseenter', it'll check for
overflow and show the element's .textContent in a tooltip.

- Added for long table names in the widget picker (Add Page, Add Widget to Page).
- Added for long page names in the left-panel list of pages.

Test Plan: Added test cases for the new overflow tooltips

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D3814

app/client/ui2018/pages.ts

@@ -4,7 +4,7 @@ import { cssEditorInput } from "app/client/ui/HomeLeftPane";
 import { itemHeader, itemHeaderWrapper, treeViewContainer } from "app/client/ui/TreeViewComponentCss";
 import { theme } from "app/client/ui2018/cssVars";
 import { icon } from "app/client/ui2018/icons";
-import { hoverTooltip } from 'app/client/ui/tooltips';
+import { hoverTooltip, overflowTooltip } from 'app/client/ui/tooltips';
 import { menu, menuItem, menuText } from "app/client/ui2018/menus";
 import { dom, domComputed, DomElementArg, makeTestId, observable, Observable, styled } from "grainjs";
 
@@ -88,6 +88,7 @@ export function buildPageDom(name: Observable<string>, actions: PageActions, ...
               dom.text(name),
               testId('label'),
               dom.on('click', (ev) => isTargetSelected(ev.target as HTMLElement) && isRenaming.set(true)),
+              overflowTooltip(),
             ),
             cssPageMenuTrigger(
               cssPageMenuIcon('Dots'),