HTML এলিমেন্টের ওপর মাউস মুভ করলে টেক্সট দেখানো (টুলটিপ)

এই আল্ট্রা-কুইক টিউটোরিয়ালে, আপনি শিখবেন কীভাবে একটি সংক্ষিপ্ত বর্ণনামূলক টেক্সট (যেমন টুলটিপ) দেখাতে হয় যখন আপনার ইউজাররা একটি এলিমেন্টের ওপর হোভার করে, যেমন ইমেজ বা লিংক।

টুলটিপ যোগ করতে কিছু সেকেন্ড লাগে। আপনি শুধু HTML title অ্যাট্রিবিউট ব্যবহার করুন: title।

হোভার করলে টেক্সট দেখানো (মাউস ওভার এলিমেন্ট)

এখানে রুবিক্স কিউবের একটি ইমেজের বেসিক উদাহরণ। এই ইমেজের ওপর আপনার মাউস মুভ করুন এবং কয়েক সেকেন্ডের মধ্যে রুবিক্স কিউব সম্পর্কে অতিরিক্ত ইনফরমেশন পপ-আপ হবে:

উপরের ইমেজ এলিমেন্টের HTML মার্কআপ:

<img src="url-to-image-file" title="The Rubik's Cube. A 3-D combination puzzle toy invented in 1974 by Hungarian sculptor Ernő Rubik." alt="A Rubik’s Cube" />

মান লইয়ে নিন আপনি চান আপনার ইউজাররা লিংক/এ্যাঙ্কর এলিমেন্টের ওপর মাউস মুভ করলে টুলটিপ দেখাবে।

এই লিংকের ওপর মাউস মুভ করুন টুলটিপ দেখতে

লেটেস্ট আর্টিকেলস

এবং HTML মার্কআপ:

<a href="https://techstacker.com" title="Link to TechStacker’s front page" >লেটেস্ট আর্টিকেলস</a >

এটাই সব। আপনি যেকোনো HTML এলিমেন্টে title অ্যাট্রিবিউট যোগ করতে পারেন।

কেন লভব আপনার ইউজাররা এলিমেন্টের ওপর মাউস মুভ করলে টেক্সট দেখানো বেনেফিশিয়াল?

মান লইয়ে নিন আপনার একটি এলিমেন্ট আছে যা এর সাদگیর কারণে কিছু লোকের জন্য বিভ্রান্তিকর হতে পারে। উদাহরণ হতে পারে একটি আইকন। অধিকাংশ মানুষ হয়তো কিছু হাতের গুনে আইকন চিনতে পারে, কিন্তু পশ্চিমাত্য জগতে একা হাজার হাজার আলাদা আইকন ডিসপ্লে থাকে।

সিম্পলি একটি আইকনের ওপর (যেমন ইমেজ এলিমেন্টের ভিতরে) title অ্যাট্রিবিউট যোগ করলে মানুষને অপশন মিলে আইকনের ফাংশন সম্পর্কে স্পষ্ট বর্ণনা পাওয়ার, যেকোনো জায়গায় আপনার UI-তে।

এখন আপনি ভাবতে পারেন, কতজন মানুষ জানে হোভার করলে কখনও কখনও একস্ট্রা ইনফরমেশন রিভিল হয়?

এটি একটি গরেট কুয়েশ্চন। উত্তর হচ্ছে এটা আপনার টার্গেট অডিয়েন্সের ওপর ডিপেন্ড করে। অধিকাংশ টেক-সোভি মানুষ অন্তর্জ্ঞানানুযায়ী জানে হোভার + ১-২ সেকেন্ড ওয়েট করলে প্রায়শই বিষয় সম্পর্কে একস্ট্রা ইনফরমেশন রিভিল হয়।

কিন্তু আপনার অডিয়েন্স যদি বড় আকারে নন-টেক সেভি মানুষ বা সে মানুষ যারা ওয়েবে বেশি ব্রাউজ করে না?

তাহলে আমার ডিফল্ট অ্যাকশন হচ্ছে Luke Wroblewski-এর ইউনিভার্সেল এডভাইস ফলো করা:

Obvious always wins.

যদি একটি আইকন স্পষ্ট না হয়, বা কমপক্ষে অধিকাংশ মানুষের কাছে স্পষ্ট না হয়, তবে আপনি বা একটি बेटার আইকন বানাবেন বা সেটিকে একটি সংক্ষিপ্ত বর্ণনার সাথে পেয়ার করবেন।

যাই হোক, title অ্যাট্রিবিউট, এবং অবশ্যই, ALT অ্যাট্রিবিউট (স্ক্রিন রিডারদের জন্য, দৃষ্টিবাধিতদের জন্য) যোগ করলে শুধু আপসাইড আছে। আপনাকে সব জায়গায় যোগ করতে হবena, কিন্তু যদি সন্দেহ হয়, তবে করলেই ভালো।

এডেড বোনাস হিসেবে, কমপক্ষে ALT অ্যাট্রিবিউটের SEO-তেימפ্যাক্ট আছে, কমপক্ষে ইনডায়রেক্টলি, কিন্তু প্রবাবলি ডায়রেক্টলিও।

কীভাবে? ঠিক, ALT ডেসক্রিপশন অ্যাক্সেসিবিলিটি ক্যাটেগরির আন্ডারে পড়ে, যা Google কোনো সিক্রেট নয় বলেছে আপনার ওয়েবসাইটের কোয়ালিটি অ্যাসেস করতে তাদের পড়ে, যা আপনার SEO র‍্যাঙ্কিং পাওয়ারকে প্রভাবিত করবে।

যা