JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Buttons › Show hint on smart button using icon? › Reply To: Show hint on smart button using icon?
May 21, 2021 at 1:49 pm
#101825
Member
Hi davout,
We a component smart-tooltip
which in in your case could be very useful.
Also I have created a little code snippet on how to use it with smart-button
component:
//In your app.compoent.html:
<smart-button #button id="button"
class="btn btn-1 btn-sep icon-info">
Button
</smart-button>
<smart-tooltip #tooltip id="tooltip"
[selector]="'button'"
[arrow]="true"
[position]="'right'">
This is a tooltip for smartButton
</smart-tooltip>
And in your app.module.ts file:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from 'smart-webcomponents-angular/button';
import { TooltipModule } from 'smart-webcomponents-angular/tooltip';
import { AppComponent } from './app.component';
@NgModule({
declarations: [ AppComponent ],
imports: [ BrowserModule, ButtonModule, TooltipModule ],
bootstrap: [ AppComponent ],
entryComponents: [ AppComponent ]
})
export class AppModule { }
Also you can check the demos regarding the tooltip:
https://www.htmlelements.com/demos/tooltip/overview/
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/