How to make custom tooltip in angular ?

Custom Tooltip Table

What is a tooltip? 

A tooltip is a small part of a text that is visible when the user hover mouse on a particular area of text, link, or image.

If you want to add a tooltip on code you can use some pre written framework like Angular material, Bootstrap, Talwind Css, and use it on your code. but what if you want to customize?.

Today I will tell you how to make a custom tooltip.

Preview - 

Screenshots :  Image -1 -> 

On mouse enter without Css

Image -2.

On mouse leave without Css


Image -3.

On mouse enter with css and cursor tracker property


Image -4.

On mouse leave with css and cursor tracker property


Code -  html ->
                        
<table>
    <tr>
        <th>Sr No.</th>
        <th>Name</th>
        <th>Email</th>
    </tr>
    <tr *ngFor='let item of API_Response'>
        <td>{{item.srNo}}</td>
        <td style="text-decoration:
        underline; color: blue;
        cursor: pointer;" (mouseenter)="showTooltip( API_Response, $event)"
(mouseleave)="hideTooltip()">
            {{item.name}}
        </td>
        <td>{{item.email}}</td>
    </tr>
</table>

<!-- =============[ Tooltip table ]============= -->
<table *ngIf="showTooltipFlag"
 class="tooltipText  tooltipTable"
 [style.left]="tooltipPos.x+'px'"
 [style.top]="tooltipPos.y+'px'">
    <tr>
        <th>Sr No.</th>
        <th>Name</th>
        <th>Email</th>
    </tr>
    <tr *ngFor='let item of tooltipDs'>
        <td>{{item.srNo}}</td>
        <td>{{item.name}}</td>
        <td>{{item.email}}</td>
    </tr>
</table>


TS Code ->
API_Response = [ /* hardcoded data */
    {srNo:'1',name:'ABC',email:'abc@gamil.com'},
    {srNo:'2',name:'AAA',email:'AAA@gamil.com'},
    {srNo:'3',name:'ABBC',email:'ABBC@gamil.com'},
    {srNo:'4',name:'ABBCD',email:'ABBCD@gamil.com'},
    {srNo:'5',name:'ABBCDE',email:'ABBCDE@gamil.com'},
    {srNo:'6',name:'ABBCDEF',email:'ABBCDEF@gamil.com'},
    {srNo:'7',name:'ABBCDEFG',email:'ABBCDEFG@gamil.com'},
    {srNo:'8',name:'ABBCDEFGH',email:'ABBCDEFGH@gamil.com'},
  ]

/* Variable declaration */
  tooltipDs: any[] = [];
  showTooltipFlag: boolean = false;
  tooltipPos = {x:0, y:0};

  /** @Author
  * Mohd_Javed
  */

/* show and tooltip and pass data into tooltip table */
  showTooltip(datasource:any, event:any){
    this.tooltipDs = datasource;
    this.showTooltipFlag = true;
    console.log(this.tooltipDs)
    this.trackCursor(event); /* Method to track cursor */
  }
  trackCursor(event: any) {
    console.log("x axis "+ event.clientX, "y asix ", event.clientY)
    this.tooltipPos.x = event.clientX + 20;
    this.tooltipPos.y = event.clientY + 50;
  }

/* hide tooltip on mouse leave event */
  hideTooltip(){
    this.showTooltipFlag = false;
    console.log("mouser leave")
  }



CSS Code ->
table, th, td{
    border: 1px solid black;
    border-collapse: collapse;
}
.tooltipText{ /* to meak table as a tooltip */
    background-color: white;
    color: black;
    position: absolute;
    z-index: 1;
}

For live example ->
path : src/app/ComponentList -> tooltipTable [Name of the component]

1. pull code from this repository ->
https://github.com/Javed5426/Blogging_Angular.git
2. do npm i
3. open browser and run it on localhost:4200

Comments

Post a Comment

Popular posts from this blog

Basic application to insert data into database

  Spring Boot CRUD Application Overview This is a simple Spring Boot CRUD application that demonstrates how to create, read, update, and delete data in a MySQL database. Database Details The application uses the following MySQL database details: Database Name:  registrationDb Table Name:  registration Table Structure The  registration  table has the following structure: CREATE TABLE registration.sql CREATE TABLE registration ( id INT AUTO_INCREMENT, name VARCHAR(255), email VARCHAR(255), PRIMARY KEY ( id ) ); How it Works The application works as follows: The user sends an HTTP request to the  UserController  class. The  UserController  class calls the  RegistrationService  class to perform the business logic. The  RegistrationService  class calls the  RegistrationDao  class to perform the data access logic. The  RegistrationDao  class interacts with the MySQL database...
Read more

Basic Spring Boot Controller Class Annotations

Basic Spring Boot Controller Class Annotations Overview of Dispatcher Servlet When a user hits an API (e.g., a GET call to fetch a user), the Dispatcher Servlet uses Handler Mapping to identify the appropriate controller to handle the request. Key Annotations for Handler Mapping @Controller Indicates that the class is responsible for handling incoming HTTP requests. @RestController Similar to  @Controller , but it combines  @Controller  and  @ResponseBody . Difference Between @Controller and @RestController @Controller  requires  @ResponseBody  on each method, while  @RestController  automatically applies it to all methods. Request Mapping To map APIs to controller methods, we use the  @RequestMapping  annotation. Example: @RequestMapping("/api/v1") public class SampleController { @GetMapping("/fetchUser ") public String getUser Details() { // Logic to fetch user details } } Simplified Mapping Annotations @GetMap...
Read more