ng-hub-ui-utils 22.1.0 → 22.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +36 -0
- package/fesm2022/ng-hub-ui-utils.mjs +768 -3
- package/fesm2022/ng-hub-ui-utils.mjs.map +1 -1
- package/ng-hub-ui-utils-22.3.1.tgz +0 -0
- package/package.json +1 -1
- package/src/lib/styles/overlay.scss +19 -6
- package/types/ng-hub-ui-utils.d.ts +395 -3
- package/ng-hub-ui-utils-22.1.0.tgz +0 -0
package/README.md
CHANGED
|
@@ -348,6 +348,41 @@ import { hubRunTransition } from 'ng-hub-ui-utils';
|
|
|
348
348
|
import { GetPipe, UcfirstPipe } from 'ng-hub-ui-utils';
|
|
349
349
|
```
|
|
350
350
|
|
|
351
|
+
### 🏷️ Tooltip Directive
|
|
352
|
+
|
|
353
|
+
Add a lightweight, themeable tooltip to any element with the `[tooltip]` directive.
|
|
354
|
+
The tooltip is appended to `<body>` (never clipped) and shows on hover/focus.
|
|
355
|
+
|
|
356
|
+
```typescript
|
|
357
|
+
import { TooltipDirective } from 'ng-hub-ui-utils';
|
|
358
|
+
|
|
359
|
+
@Component({
|
|
360
|
+
standalone: true,
|
|
361
|
+
imports: [TooltipDirective],
|
|
362
|
+
template: `<button tooltip="Save changes" placement="top">Save</button>`
|
|
363
|
+
})
|
|
364
|
+
export class ExampleComponent {}
|
|
365
|
+
```
|
|
366
|
+
|
|
367
|
+
Inputs: `tooltip` (text), `placement` (`top` | `bottom` | `left` | `right`, default `top`),
|
|
368
|
+
`delay` (fade ms, default `150`), `offset` (px, default `8`).
|
|
369
|
+
|
|
370
|
+
Theme it from any scope with `--hub-tooltip-*` variables:
|
|
371
|
+
|
|
372
|
+
```css
|
|
373
|
+
.my-scope {
|
|
374
|
+
--hub-tooltip-bg: var(--hub-sys-color-primary);
|
|
375
|
+
--hub-tooltip-color: #fff;
|
|
376
|
+
--hub-tooltip-border-radius: 999px;
|
|
377
|
+
--hub-tooltip-opacity: 1;
|
|
378
|
+
}
|
|
379
|
+
```
|
|
380
|
+
|
|
381
|
+
Available tokens: `--hub-tooltip-bg`, `--hub-tooltip-color`, `--hub-tooltip-opacity`,
|
|
382
|
+
`--hub-tooltip-padding-x`, `--hub-tooltip-padding-y`, `--hub-tooltip-border-radius`,
|
|
383
|
+
`--hub-tooltip-font-size`, `--hub-tooltip-max-width`, `--hub-tooltip-z-index`,
|
|
384
|
+
`--hub-tooltip-transition-duration`, `--hub-tooltip-shadow`, `--hub-tooltip-font-family`.
|
|
385
|
+
|
|
351
386
|
## 🚀 Installation
|
|
352
387
|
|
|
353
388
|
```bash
|
|
@@ -708,6 +743,7 @@ Recent highlights:
|
|
|
708
743
|
- [Report a bug](https://github.com/carlos-morcillo/ng-hub-ui-utils/issues)
|
|
709
744
|
- [Request a feature](https://github.com/carlos-morcillo/ng-hub-ui-utils/issues/new?template=feature_request.md)
|
|
710
745
|
- [Repository](https://github.com/carlos-morcillo/ng-hub-ui-utils)
|
|
746
|
+
- **Author**: [Carlos Morcillo](https://www.carlosmorcillo.com)
|
|
711
747
|
|
|
712
748
|
## ☕ Support the Project
|
|
713
749
|
|