{"id":23061071,"url":"https://github.com/syncfusionexamples/ej2-ng-dropdownlist-tooltip","last_synced_at":"2026-04-18T03:32:41.339Z","repository":{"id":98095104,"uuid":"111417089","full_name":"SyncfusionExamples/ej2-ng-dropdownlist-tooltip","owner":"SyncfusionExamples","description":"Showing tooltip for Angular Dropdownlist items in popup","archived":false,"fork":false,"pushed_at":"2024-10-17T04:02:38.000Z","size":27,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-06-11T02:49:42.260Z","etag":null,"topics":["angular","angular-dropdownlist","dropdownlist"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/SyncfusionExamples.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2017-11-20T13:56:52.000Z","updated_at":"2024-10-17T04:02:42.000Z","dependencies_parsed_at":"2025-06-11T02:38:39.858Z","dependency_job_id":"85767db6-2475-4b49-95e2-d882b44060ef","html_url":"https://github.com/SyncfusionExamples/ej2-ng-dropdownlist-tooltip","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SyncfusionExamples/ej2-ng-dropdownlist-tooltip","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fej2-ng-dropdownlist-tooltip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fej2-ng-dropdownlist-tooltip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fej2-ng-dropdownlist-tooltip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fej2-ng-dropdownlist-tooltip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SyncfusionExamples","download_url":"https://codeload.github.com/SyncfusionExamples/ej2-ng-dropdownlist-tooltip/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fej2-ng-dropdownlist-tooltip/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31955712,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["angular","angular-dropdownlist","dropdownlist"],"created_at":"2024-12-16T03:16:06.443Z","updated_at":"2026-04-18T03:32:41.311Z","avatar_url":"https://github.com/SyncfusionExamples.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DropDownList items with Tooltip for Angular\r\n\r\n## Tooltip is displayed for the selected item in DropDown element\r\n\r\nBy using title attribute with change event handler, you can enable the tooltip support to selected item which is shown in input element. Whenever selection changed, need to update the title attribute value from selected item’s text content. Please refer the below code snippet,\r\n\r\n```\r\n public onChange: any = (args: SelectEventArgs) =\u003e {\r\n     let dropDownObj: HTMLElement = document.getElementById('ddlelement');\r\n     dropDownObj.setAttribute('title', args.item.textContent);\r\n  }\r\n```\r\n\r\n## Tooptip for all the list items in dropdown popup\r\n\r\nWe can enable the tooltip option to all the list items by using title attribute with open event.Please refer the below code snippet for enable the tooltip for all the list items in open event handler.\r\n\r\n```\r\npublic  onOpen: any  = (args:PopupEventArgs) =\u003e {\r\n    // get all the list items\r\n    let listItems: any = args.popup.element.querySelectorAll('li');\r\n    let length: number = listItems.length;\r\n    for (let i: number = 0; i \u003c length; i++) {\r\n        // set title attribute to all the list items.\r\n        listItems[i].setAttribute('title', listItems[i].textContent);\r\n    }\r\n}\r\n\r\n```\r\n\r\n## Installing and Running Application\r\n\r\n### Installing\r\n\r\nTo install all dependent packages, use the below command\r\n\r\n```\r\nnpm install\r\n```\r\n\r\n### Run the application\r\n\r\nTo compile and run the source files, use the below command\r\n\r\n```\r\nnpm start\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fej2-ng-dropdownlist-tooltip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyncfusionexamples%2Fej2-ng-dropdownlist-tooltip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fej2-ng-dropdownlist-tooltip/lists"}