|
@@ -1 +1 @@
|
|
1
|
-
{"demo-tooltip.component.html":"<div class=\"container\">\n <div class=\"row\">\n <div class=\"col-4\">\n <p style=\"display: flex\">\n <!-- This delay is only there for checking out styles and isn't recommended this big -->\n <mat-icon\n matTooltipHideDelay=\"500000000\"\n class=\"filled\"\n color=\"info\"\n matTooltipPosition=\"right\"\n matTooltip=\"Here you can write some information on the right\"\n aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n >\n info\n </mat-icon>\n Right\n </p>\n </div>\n\n <div class=\"col-4\">\n <p style=\"display: flex\">\n <!-- This delay is only there for checking out styles and isn't recommended this big -->\n <mat-icon\n matTooltipHideDelay=\"500000000\"\n class=\"filled\"\n color=\"info\"\n matTooltipPosition=\"above\"\n matTooltip=\"Here you can write some information above\"\n aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n >\n info\n </mat-icon>\n Above\n </p>\n <p class=\"text-center\" style=\"display: flex\">\n <mat-icon\n color=\"info\"\n matTooltipPosition=\"below\"\n matTooltip=\"Here you can write some information below\"\n aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n >\n info\n </mat-icon>\n Below\n </p>\n </div>\n\n <div class=\"col-4\">\n <p class=\"text-right\" style=\"display: flex\">\n Left\n <mat-icon\n color=\"info\"\n matTooltipPosition=\"left\"\n matTooltip=\"Here you can write some information on the left\"\n aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n >\n info\n </mat-icon>\n </p>\n </div>\n </div>\n</div>\n\n<h3>With Custom HTML</h3>\n<div class=\"demo-tooltip-container\">\n <div class=\"demo-tooltip\">\n <mat-icon\n OnemrvaMatTooltip\n position=\"right\"\n color=\"info\"\n [contentTemplate]=\"tooltipContent\"\n [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n [attr.data-cy-tooltipcontent]=\"'data-cy-tooltip-content'\"\n >\n info\n </mat-icon>\n <ng-template #tooltipContent>\n I am a custom content with html (position: <b>right</b>) but there are 3\n other positions\n <ul>\n <li>left</li>\n <li>top</li>\n <li>bottom</li>\n </ul>\n </ng-template>\n </div>\n\n <div class=\"demo-tooltip\">\n <mat-icon\n OnemrvaMatTooltip\n position=\"left\"\n color=\"info\"\n [contentTemplate]=\"tooltipContent2\"\n [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n [attr.data-cy-tooltipcontent2]=\"'data-cy-tooltip-content'\"\n >\n info\n </mat-icon>\n <ng-template #tooltipContent2>\n I am a custom content (position: <b>left</b>)\n </ng-template>\n </div>\n\n <div class=\"demo-tooltip\">\n <mat-icon\n OnemrvaMatTooltip\n class=\"filled\"\n position=\"above\"\n color=\"info\"\n [contentTemplate]=\"tooltipContent3\"\n [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n [attr.data-cy-tooltipcontent3]=\"'data-cy-tooltip-content'\"\n >\n info\n </mat-icon>\n <ng-template #tooltipContent3>\n <div style=\"color: pink\">\n I am a custom content with html (position: <b>top</b>)\n </div></ng-template\n >\n </div>\n\n <div class=\"demo-tooltip\">\n <mat-icon\n OnemrvaMatTooltip\n class=\"filled\"\n position=\"below\"\n color=\"info\"\n [contentTemplate]=\"tooltipContent4\"\n [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n [attr.data-cy-tooltipcontent4]=\"'data-cy-tooltip-content'\"\n >\n info\n </mat-icon>\n <ng-template #tooltipContent4>\n I am a custom content (position: <b>bottom</b>)\n </ng-template>\n </div>\n</div>\n","demo-tooltip.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { OnemrvaMatTooltipModule } from '@onemrvapublic/design-system/mat-tooltip';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-tooltip',\n templateUrl: './demo-tooltip.component.html',\n standalone: true,\n imports: [\n CommonModule,\n MatTooltipModule,\n OnemrvaMatTooltipModule,\n MatIconModule,\n ],\n\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTooltipComponent extends DemoComponentBase {}\n"}
|
|
1
|
+
{"demo-tooltip.component.html":"@if (html()) {\n <mat-icon\n OnemrvaMatTooltip\n [position]=\"position()\"\n class=\"{{ filled() ? 'filled' : '' }}\"\n color=\"info\"\n [contentTemplate]=\"tooltipContent\"\n [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n [attr.data-cy-tooltipcontent]=\"'data-cy-tooltip-content'\"\n >\n info\n </mat-icon>\n <ng-template #tooltipContent>\n I am a custom content with html (position: <b>right</b>) but there are 3\n other positions\n <ul>\n <li>left</li>\n <li>top</li>\n <li>bottom</li>\n </ul>\n </ng-template>\n} @else {\n <mat-icon\n matTooltipHideDelay=\"500000000\"\n class=\"{{ filled() ? 'filled' : '' }}\"\n color=\"info\"\n [matTooltipPosition]=\"position()\"\n matTooltip=\"Here you can write some information on the right\"\n aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n >\n info\n </mat-icon>\n}\n","demo-tooltip.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatTooltipModule, TooltipPosition } from '@angular/material/tooltip';\nimport { OnemrvaMatTooltipModule } from '@onemrvapublic/design-system/mat-tooltip';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-tooltip',\n templateUrl: './demo-tooltip.component.html',\n standalone: true,\n imports: [\n CommonModule,\n MatTooltipModule,\n OnemrvaMatTooltipModule,\n MatIconModule,\n ],\n\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTooltipComponent extends DemoComponentBase {\n position = input<TooltipPosition>('above');\n filled = input<boolean>(false);\n html = input<boolean>(false);\n}\n"}
|