Mouse Hover এবং Tooltip হল ওয়েব ডেভেলপমেন্টে দুটি অত্যন্ত গুরুত্বপূর্ণ ইউজার ইন্টারঅ্যাকশন যা ওয়েব পেজের ইউজার অভিজ্ঞতা (UX) উন্নত করতে ব্যবহৃত হয়। Mouse Hover এর মাধ্যমে ইউজার যখন মাউসের কার্সর একটি নির্দিষ্ট এলিমেন্টের উপর রাখে, তখন কিছু ইন্টারঅ্যাকশন ঘটে। Tooltip হল একটি ছোট তথ্য প্রদর্শন যা সাধারণত একটি এলিমেন্টের উপর মাউস হোভার করার সময় দৃশ্যমান হয়।

Angular-এ এই ধরনের ইভেন্ট হ্যান্ডলিং সহজে করা যায়। এখানে আমরা Mouse Hover এবং Tooltip Event Handling নিয়ে কাজ করার জন্য দুটি প্রধান বিষয় নিয়ে আলোচনা করব।

Step 1: Mouse Hover Event Handling in Angular

Angular-এ mouse hover ইভেন্টটি হ্যান্ডল করার জন্য আপনি (mouseenter) এবং (mouseleave) ইভেন্ট ব্যবহার করতে পারেন।

উদাহরণ: Mouse Hover Event Handling

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Mouse Hover Example';
  hoverMessage: string = 'Mouse not hovering';

  onMouseEnter() {
    this.hoverMessage = 'Mouse is hovering!';
  }

  onMouseLeave() {
    this.hoverMessage = 'Mouse is not hovering';
  }
}

app.component.html

<h1>{{ title }}</h1>

<div 
  (mouseenter)="onMouseEnter()" 
  (mouseleave)="onMouseLeave()" 
  style="width: 200px; height: 200px; background-color: lightblue; text-align: center; padding-top: 80px;">
  Hover over this box
</div>

<p>{{ hoverMessage }}</p>

• (mouseenter): এই ইভেন্টটি তখন ট্রিগার হয় যখন ইউজার মাউস কার্সর একটি এলিমেন্টের উপর নিয়ে আসে।
• (mouseleave): এই ইভেন্টটি তখন ট্রিগার হয় যখন ইউজার মাউস কার্সর এলিমেন্টের বাইরে নিয়ে যায়।

এখানে, যখন আপনি div এর উপর মাউস হোভার করবেন, তখন একটি মেসেজ দেখাবে যা পরিবর্তিত হবে।

Step 2: Tooltip Event Handling in Angular

Angular-এ টুলটিপ তৈরি করার জন্য অনেক লাইব্রেরি পাওয়া যায়, তবে এখানে আমরা একটি সিম্পল টুলটিপ ইমপ্লিমেন্ট করব যা mouse hover ইভেন্টের মাধ্যমে প্রদর্শিত হবে।

উদাহরণ: Tooltip Event Handling

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  tooltipVisible: boolean = false;
  
  // Mouse hover event for showing tooltip
  showTooltip() {
    this.tooltipVisible = true;
  }

  // Mouse leave event for hiding tooltip
  hideTooltip() {
    this.tooltipVisible = false;
  }
}

app.component.html

<h1>Tooltip Example</h1>

<button 
  (mouseenter)="showTooltip()" 
  (mouseleave)="hideTooltip()" 
  style="position: relative; padding: 10px 20px;">
  Hover over me!
</button>

<!-- Tooltip -->
<div *ngIf="tooltipVisible" 
     style="position: absolute; background-color: #333; color: white; padding: 5px; border-radius: 5px; top: 40px; left: 0;">
  This is a Tooltip!
</div>

• (mouseenter): যখন ইউজার বাটনে মাউস হোভার করবে, তখন showTooltip() ফাংশন কল হবে এবং টুলটিপটি প্রদর্শিত হবে।
• (mouseleave): যখন ইউজার বাটন থেকে মাউস সরিয়ে নেবে, তখন hideTooltip() ফাংশন কল হবে এবং টুলটিপটি অদৃশ্য হয়ে যাবে।

এখানে tooltipVisible নামে একটি ভ্যারিয়েবল ব্যবহৃত হয়েছে যা টুলটিপের দৃশ্যমানতা নিয়ন্ত্রণ করে। *ngIf ডিরেক্টিভ ব্যবহার করা হয়েছে টুলটিপটি কেবল তখনই প্রদর্শিত হবে যখন tooltipVisible ভ্যালু true হবে।

Step 3: Tooltip Styling

আপনি টুলটিপের স্টাইল কাস্টমাইজ করতে পারেন। যেমন: টুলটিপের ব্যাকগ্রাউন্ড, রঙ, মার্জিন, প্যাডিং, ফন্ট সাইজ, এবং টুলটিপের অবস্থান নিয়ন্ত্রণ করতে পারেন।

/* Tooltip Style */
.tooltip {
  position: absolute;
  background-color: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  opacity: 0.9;
}

এটি আপনার টুলটিপকে আরো আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তুলবে।

Step 4: Mouse Hover and Tooltip with Angular Material

Angular Material লাইব্রেরি ব্যবহার করে Tooltip আরো উন্নত এবং ইন্টারঅ্যাকটিভ করা যেতে পারে। এখানে আমরা দেখাবো কিভাবে Angular Material এর TooltipModule ব্যবহার করে টুলটিপ তৈরি করা যায়।

1. Angular Material ইন্সটল করুন:

ng add @angular/material

2. AppModule এ TooltipModule ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MatTooltipModule } from '@angular/material/tooltip'; // TooltipModule ইমপোর্ট

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatTooltipModule // TooltipModule যোগ করা হয়েছে
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. HTML ফাইলে Tooltip ব্যবহার করুন:

<button mat-raised-button matTooltip="Click to perform action" matTooltipPosition="above">
  Hover over me!
</button>

এখানে, matTooltip ব্যবহার করা হয়েছে টুলটিপ দেখানোর জন্য এবং matTooltipPosition এর মাধ্যমে টুলটিপের অবস্থান নির্ধারণ করা হয়েছে (যেমন "above", "below", "left", "right")।

সারাংশ

• Mouse Hover এবং Tooltip ওয়েব ইউআই ডিজাইনের অত্যন্ত গুরুত্বপূর্ণ অংশ, যেগুলি ইউজারের সাথে ইন্টারঅ্যাকশন তৈরির জন্য ব্যবহৃত হয়।
• Angular-এ mouse hover ইভেন্টগুলি (mouseenter) এবং (mouseleave) এর মাধ্যমে হ্যান্ডল করা হয়।
• Tooltip তৈরি করার জন্য আপনি সরাসরি Angular এর Mouse Hover ইভেন্ট ব্যবহার করতে পারেন অথবা Angular Material এর TooltipModule ব্যবহার করে আরও উন্নত টুলটিপ তৈরি করতে পারেন।
• এই ইভেন্ট হ্যান্ডলিং এবং টুলটিপ কাস্টমাইজেশনের মাধ্যমে আপনার অ্যাপ্লিকেশন আরও ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব হবে।