ui: create tooltip component

[lgfa29]

After using #11358 for a bit, I was quickly annoyed with the unnecessarily wide tooltip when client names are relatively short. This PR creates a Tooltip component that ellipsizes the tooltip text content in the middle, keeping it short enough to fit into a single-line tooltip.

Before:

After:

Ellipsizing in the middle allow users to glance at the beginning and end of text. This is important for client names since they are often prefixed and indexed in a standard format. Cutting off the end of the string would make impossible to distinguish between nomad-client-with-long-name-1 and nomad-client-with-long-name-2.

Using multiline was also not helpful in the case where client names had no spaces.

The value used as a threshold to decide if the text must be ellipsized is fairly arbitrary and can be adjusted based on user feedback.

No changelog since this fixes an unreleased feature.

[ChaiWithJai]

LGTM

[github-actions]

Ember Asset Size action

As of 885169c

Files that got Bigger 🚨:

File	raw	gzip
nomad-ui.js	+801 B	+119 B

Files that stayed the same size 🤷‍:

File	raw	gzip
vendor.js	0 B	0 B
nomad-ui.css	0 B	0 B
vendor.css	0 B	0 B

[github-actions]

Ember Test Audit comparison

	main	885169c	change
passes	1193	1194	+1
failures	0	0	0
flaky	0	0	0
duration	10m 02s 733ms	8m 24s 739ms	-1m 37s 994ms

[github-actions]

I'm going to lock this pull request because it has been closed for 120 days ⏳. This helps our maintainers find and focus on the active contributions.
If you have found a problem that seems related to this change, please open a new issue and complete the issue template so we can capture all the details necessary to investigate further.