{"id":26618347,"url":"https://github.com/mkeller1992/ng-error-tooltips","last_synced_at":"2026-01-14T22:32:36.600Z","repository":{"id":283461790,"uuid":"951843246","full_name":"mkeller1992/ng-error-tooltips","owner":"mkeller1992","description":"An Angular library for reactive forms that displays tooltips on form inputs with errors, providing a user-friendly way to visualize validation messages.","archived":false,"fork":false,"pushed_at":"2026-01-13T17:16:36.000Z","size":2764,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-13T18:22:04.635Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mkeller1992.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-03-20T10:29:55.000Z","updated_at":"2026-01-13T17:15:46.000Z","dependencies_parsed_at":"2025-03-20T11:33:56.101Z","dependency_job_id":"28832947-e594-4171-8ad4-075891fae425","html_url":"https://github.com/mkeller1992/ng-error-tooltips","commit_stats":null,"previous_names":["mkeller1992/ng-error-tooltips"],"tags_count":33,"template":false,"template_full_name":null,"purl":"pkg:github/mkeller1992/ng-error-tooltips","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkeller1992%2Fng-error-tooltips","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkeller1992%2Fng-error-tooltips/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkeller1992%2Fng-error-tooltips/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkeller1992%2Fng-error-tooltips/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mkeller1992","download_url":"https://codeload.github.com/mkeller1992/ng-error-tooltips/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkeller1992%2Fng-error-tooltips/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28436501,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-14T21:32:52.117Z","status":"ssl_error","status_checked_at":"2026-01-14T21:32:33.442Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-24T08:01:56.668Z","updated_at":"2026-01-14T22:32:36.588Z","avatar_url":"https://github.com/mkeller1992.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Form Validation"],"readme":"# ng-error-tooltips\n\n[![npm version](https://badge.fury.io/js/ng-error-tooltips.svg?icon=si%3Anpm)](https://badge.fury.io/js/ng-error-tooltips)\n![build status](https://github.com/mkeller1992/ng-error-tooltips/actions/workflows/npm-publish.yml/badge.svg)\n[![codecov](https://codecov.io/gh/mkeller1992/ng-error-tooltips/graph/badge.svg?token=FDYFIOR4LQ)](https://codecov.io/gh/mkeller1992/ng-error-tooltips)\n\nAn Angular library for reactive forms that displays tooltips on form inputs with errors, providing a user-friendly way to visualize validation messages.\n\nThe latest library version is compatible with **Angular 21**.  \nStarting with version **20.1.0**, `ng-error-tooltips` is fully **zoneless-compatible**.\n\n---\n\n## Demo\n\nhttps://mkeller1992.github.io/ng-error-tooltips/\n\n---\n\n## Install\n\nTo install the library, enter the following command in your console:\n\n```bash\nnpm i ng-error-tooltips\n```\n\n---\n\n## Setup\n\n### For apps based on standalone components\n\nImport `ErrorTooltipDirective` directly in your component:\n\n```ts\nimport { ErrorTooltipDirective } from '@ng-error-tooltips';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss'],\n  imports: [ErrorTooltipDirective]\n})\nexport class AppComponent {}\n```\n\n---\n\n## Usage\n\nDefine a reactive form with validators in your TypeScript component.  \nYou can use validators from the `CustomValidators` class, which is part of this library.  \nFor applications with language switching support, use the `CustomValidatorsI18n` variants instead.\n\n```ts\nimport { Component, inject } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { ErrorTooltipDirective, CustomValidators } from '@ng-error-tooltips';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrl: './app.component.scss',\n  imports: [FormsModule, ReactiveFormsModule, ErrorTooltipDirective],\n})\nexport class AppComponent {\n\n  private readonly formBuilder = inject(FormBuilder);\n\n  formGroup: FormGroup = this.formBuilder.group({\n    nameInput: new FormControl\u003cstring\u003e('', {\n      validators: [\n        CustomValidators.required(),\n        CustomValidators.minLength(3),\n      ],\n    }),\n  });\n}\n```\n\nCreate the corresponding form in your HTML file and add `ngErrorTooltip` to the form fields where error tooltips should be displayed.\n\n```html\n\u003cform [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\"\u003e\n\n  \u003ch4\u003eSample Form\u003c/h4\u003e\n\n  \u003cinput\n    ngErrorTooltip\n    formControlName=\"nameInput\"\n    placeholder=\"Enter your name*\"\n    type=\"text\"\u003e\n\n  \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n\n\u003c/form\u003e\n```\n\n---\n\n### Two ways to pass additional properties\n\nYou can pass separate properties, such as `placement`, as shown in the example below:\n\n```html\n\u003cinput\n  ngErrorTooltip\n  [placement]=\"'right'\"\n  formControlName=\"nameInput\"\n  placeholder=\"Enter your name*\"\n  type=\"text\"\u003e\n```\n\nAlternatively, you can pass one or more properties via an `ErrorTooltipOptions` object:\n\n```ts\nimport { ErrorTooltipOptions } from '@ng-error-tooltips';\n\ntooltipOptions: ErrorTooltipOptions = {\n  placement: 'right',\n};\n```\n\n```html\n\u003cinput\n  formControlName=\"ageInput\"\n  ngErrorTooltip\n  [options]=\"tooltipOptions\"\n  class=\"form-control\"\n  placeholder=\"Enter your age*\"\n  type=\"number\"\u003e\n```\n\n---\n\n## Internationalisation (i18n)\n\nStarting with version **21.1.0**, `ng-error-tooltips` supports **reactive multi-language error messages**.\n\nThe library itself is intentionally lightweight regarding translations:\n\n- No dependency on `ngx-translate` or similar libraries\n- No internal language management\n- Fully signal-based and zoneless-friendly\n\nYour application remains the single source of truth for the active language.\n\n\n\n### Default behaviour (no configuration)\n\nIf you do nothing, the tooltip falls back to **German (`de`)** error messages.\n\nThis guarantees **backwards compatibility** for existing applications.\n\n\n\n### Providing the active language\n\nTo enable language switching, provide the current language as a  \n`Signal\u003c'de' | 'fr' | 'en'\u003e` using `provideErrorTooltips`.\n\nExample (standalone bootstrap):\n\n```ts\nimport { bootstrapApplication, inject } from '@angular/core';\nimport { provideErrorTooltips } from '@ng-error-tooltips';\nimport { LanguageService } from './language.service';\n\nexport const currentLanguageCode = signal\u003cSupportedLanguage\u003e(defaultLanguage);\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideErrorTooltips({ lang: currentLanguageCode })\n  ]\n});\n```\n\nWhenever the language signal changes, all visible error tooltips update automatically.\n\n\n\n### Using i18n-aware validators\n\nFor applications with language switching, use the `CustomValidatorsI18n` variants.\n\n```ts\nimport { CustomValidatorsI18n } from '@ng-error-tooltips';\n\nformGroup = this.fb.group({\n  name: ['', [\n    CustomValidatorsI18n.requiredI18n(),\n    CustomValidatorsI18n.minLengthI18n(3)\n  ]]\n});\n```\n\nInternally, these validators return tri-language payloads:\n\n```ts\n{\n  de: 'Eingabe erforderlich',\n  fr: 'Saisie requise',\n  en: 'Input required'\n}\n```\n\nThe tooltip resolves the correct language automatically.\n\n\n\n### App-specific messages (regexPattern)\n\nFor domain-specific validation rules, all translations must be provided explicitly:\n\n```ts\nCustomValidatorsI18n.regexPatternI18n(\n  /^[A-Z]{3}\\d{4}$/,\n  {\n    de: 'Ungültiges Format',\n    fr: 'Format invalide',\n    en: 'Invalid format'\n  }\n);\n```\n\nThis is intentional, as such messages are application-specific and cannot be provided by the library.\n\n\n\n### Mixing legacy and i18n validators\n\nYou can freely mix:\n\n- legacy validators (`CustomValidators.required()`)\n- i18n validators (`CustomValidatorsI18n.requiredI18n()`)\n\nThe tooltip handles both transparently.\n\n---\n\n## Properties\n\n| name | type | default | description |\n|-----|------|---------|-------------|\n| id | string \\| number | 0 | A custom id that can be assigned to the tooltip |\n| showFirstErrorOnly | boolean | false | Whether the tooltip should only display the first error if multiple errors exist |\n| placement | Placement | 'bottom-left' | The position of the tooltip |\n| zIndex | number | 1101 | The z-index of the tooltip |\n| tooltipClass | string | '' | Additional CSS classes applied to the tooltip (`::ng-deep`) |\n| shadow | boolean | true | Whether the tooltip has a shadow |\n| offset | number | 8 | Offset of the tooltip relative to the element |\n| width | string | '' | Fixed width of the tooltip |\n| maxWidth | string | '350px' | Maximum width of the tooltip |\n| pointerEvents | \"auto\" \\| \"none\" | 'auto' | Whether the tooltip reacts to pointer events |\n\n---\n\n## Angular Jest unit tests\n\n### Mocking `ErrorTooltipDirective`\n\nIn unit tests, you may want to replace the real directive with the mock directive provided by the library.\n\n```ts\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { AppComponent } from './app.component';\nimport { ErrorTooltipDirective, MockErrorTooltipDirective } from '@ng-error-tooltips';\nimport { FormBuilder } from '@angular/forms';\n\ndescribe('AppComponent', () =\u003e {\n  let component: AppComponent;\n  let fixture: ComponentFixture\u003cAppComponent\u003e;\n\n  beforeEach(async () =\u003e {\n\n    await TestBed.configureTestingModule({\n      imports: [AppComponent],\n      providers: [FormBuilder]\n    })\n    .overrideComponent(AppComponent, {\n      remove: {\n        imports: [ErrorTooltipDirective]\n      },\n      add: {\n        imports: [MockErrorTooltipDirective]\n      }\n    })\n    .compileComponents();\n\n    fixture = TestBed.createComponent(AppComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmkeller1992%2Fng-error-tooltips","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmkeller1992%2Fng-error-tooltips","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmkeller1992%2Fng-error-tooltips/lists"}