https://github.com/wandri/angular-ellipsis-tooltip

Angular component to display ellipsis and material tooltip dynamically
https://github.com/wandri/angular-ellipsis-tooltip

angular angular-material ellipsis material-design tooltip

Last synced: 24 days ago
JSON representation

Angular component to display ellipsis and material tooltip dynamically

• Host: GitHub
• URL: https://github.com/wandri/angular-ellipsis-tooltip
• Owner: wandri
• License: mit
• Created: 2021-03-14T13:41:11.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2023-12-11T10:46:32.000Z (about 1 year ago)
• Last Synced: 2024-08-04T01:10:04.270Z (4 months ago)
• Topics: angular, angular-material, ellipsis, material-design, tooltip
• Language: TypeScript
• Homepage: https://wandri.github.io/angular-ellipsis-tooltip/
• Size: 1.16 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - angular-ellipsis-tooltip - Angular component to display ellipsis and material tooltip dynamically. (Table of contents / Third Party Components)
• fucking-awesome-angular - angular-ellipsis-tooltip - Angular component to display ellipsis and material tooltip dynamically. (Table of contents / Third Party Components)
• fucking-awesome-angular - angular-ellipsis-tooltip - Angular component to display ellipsis and material tooltip dynamically. (Table of contents / Third Party Components)

README

        
# Angular Ellipsis Material Tooltip

For responsive applications, the use of **ellispis** for long content can be necessary. When we want to go further and

display

the **[Angular material tooltip](https://material.angular.io/components/tooltip/overview "Angular material tooltip")**

when the ellipsis are displayed.

**Demo**: https://wandri.github.io/angular-ellipsis-tooltip/.

![demo tooltip](https://github.com/wandri/angular-ellipsis-tooltip/blob/master/assets/demo_ellipsis.gif)

Add the module

```

@NgModule({

  declarations: [

    ...,

  ],

  imports: [

    ...,

    NgxEllipsisTooltipModule,

  ],

})

```

## ``

| @ Input  | Description                                          | Type    | Requested              |

|:---------|:-----------------------------------------------------|:--------|:-----------------------|

| text     | text to display                                      | string  | True                   |

| smartCut | move the ellipsis inside the text and not at the end | boolean | False (default = true) |