TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে বুটস্ট্র্যাপ 5 টুলটিপ তৈরি করবেন?

2

টুলটিপস হল মার্কার টেক্সটের একটি অংশ যা হাইপারলিঙ্কের উপর মাউস ঘুরিয়ে দিলে উপস্থিত হবে। ইন বুটস্ট্র্যাপ 5, সেখানে নির্দিষ্ট কিছু জিনিষ আপনি টুলটিপ যোগ করার জন্য চেষ্টা করার আগে যত্ন নিতে হবে হয়। যদি আপনি লক্ষ্য করেছেন যে স্টার্টার টেমপ্লেটে পপার নামে একটি নতুন তৃতীয় পক্ষের জাভাস্ক্রিপ্ট লাইব্রেরি রয়েছে । এটি প্রধানত পজিশনিং এর জন্য টুলটিপ কম্পোনেন্টের জন্য ব্যবহৃত হয়।

এই টিউটোরিয়ালটি নিম্নলিখিত অধ্যায়গুলি জুড়েছে:

  1. বুটস্ট্র্যাপ 5 টি টুলটিপের মূল বিষয়
  2. টুলটিপ শুরু করা হচ্ছে
  3. নোঙ্গর ট্যাগ সহ টুলটিপ ব্যবহার করা
  4. টুলটিপের অবস্থান
  5. বোতাম সহ টুলটিপ ব্যবহার করা
  6. টুলটিপে HTML বিষয়বস্তু যোগ করা
  7. অপশন কাস্টমাইজ করা

1 বুটস্ট্র্যাপ টুলটিপের মূল বিষয়

  • টুলটিপস হল জাভাস্ক্রিপ্ট উপাদান, তাই আপনার HTML টেমপ্লেটে bootstrap.min.js ফাইল অন্তর্ভুক্ত করা উচিত। বিকল্পভাবে আপনি সংযুক্ত স্ক্রিপ্ট ফাইল bootstrap.bundle.min.js ব্যবহার করতে পারেন।
  • এছাড়াও টুলটিপের সঠিক অবস্থানের জন্য, আপনার সমস্ত সোর্স কোডে popper.min.js অন্তর্ভুক্ত করা উচিত।
  • পৃষ্ঠা লোড করার কার্যকারিতার কারণে টুলটিপগুলি ডিফল্টরূপে লোড হবে না। অতএব, পৃষ্ঠায় লোড করার জন্য মূল উপাদান দিয়ে শুরু করা প্রয়োজন।
  • স্ক্রিপ্ট ফাইলের ক্রম popper.min.js, bootstrap.min.js এবং তারপর আরম্ভ স্ক্রিপ্ট হওয়া উচিত।
  • টুলটিপসে কোন ইমেজ ব্যবহার করা হয়নি এবং ধারণাটি টিপসি jQuery প্লাগইন দিয়ে তৈরি ফেসবুক স্টাইলের টুলটিপের উপর ভিত্তি করে ।
  • শূন্য শিরোনাম দৈর্ঘ্য সহ টুলটিপ দেখানো হবে না।
  • বুটস্ট্র্যাপ টুলটিপের আচরণ নিয়ন্ত্রণ করতে CSS অ্যানিমেশন এবং ডেটা বৈশিষ্ট্য ব্যবহার করে।

2 বুটস্ট্র্যাপে টুলটিপস শুরু করা

অন্যান্য বুটস্ট্র্যাপ উপাদানগুলির বিপরীতে, ব্যবহারের আগে টুলটিপগুলি শুরু করা উচিত। আপনি নীচের মত বৈশ্বিক সূচনা যোগ করতে পারেন অথবা প্রয়োজন হলে নির্দিষ্ট উপাদান স্তরের আরম্ভ ব্যবহার করতে পারেন।

$(function() { $('[data-toggle="tooltip"]').tooltip() })

নীচে নোঙ্গর উপাদান স্তরে টুলটিপ সক্রিয় করার কোড।

<script> $("a").tooltip(); </script>

নীচে আরম্ভ করার জন্য বোতাম ব্যবহার করার কোড রয়েছে:

<script> $("button").tooltip(); </script>

মনে রাখবেন এই স্ক্রিপ্ট কোডটি popper.min.js এবং bootstrap.min.js লিঙ্কের ঠিক পরে যোগ করা উচিত প্রত্যাশিত টুলটিপের জন্য। আপনি এখানে স্টার্টার টেমপ্লেট ফরম্যাট চেক করতে পারেন ।

3 অ্যাঙ্কর ট্যাগে টুলটিপ ব্যবহার করা

আসুন প্রথমে নোঙ্গর ট্যাগ ব্যবহার করে একটি সহজ টুলটিপ তৈরি করি। কোডটি নীচের মত হওয়া উচিত:

<a href="#" data-toggle="tooltip" data-animation="false" title="This is a tooltip"> Content to Show </a>
  • আপনার টুলটিপ হিসাবে মান সহ ডেটা-টগল বৈশিষ্ট্য ব্যবহার করা উচিত।
  • টুলটিপ হভার করার সময় পপআপে প্রবেশ করা শিরোনাম পাঠ্য দেখাবে।
  • অংশ দেখানোর বিষয়বস্তু একটি হাইপারলিংকের অনুরূপ নোঙ্গর পাঠ্য।

ফলাফলটি মাউস হোভারে ব্রাউজারে নীচের মত হওয়া উচিত:

কিভাবে বুটস্ট্র্যাপ 5 টুলটিপ তৈরি করবেন?

4 পজিশনিং টুলটিপস

আপনি উপরের উদাহরণে দেখতে পাচ্ছেন, ডিফল্টরূপে টুলটিপ বিষয়বস্তুর উপরে অবস্থান করবে। বুটস্ট্র্যাপ আপনাকে ডাটা-প্লেসমেন্ট অ্যাট্রিবিউট ব্যবহার করে নোঙ্গর পাঠ্যের উপরে, বাম, ডান এবং নীচে অবস্থান করতে দেয়।

  • শীর্ষস্থানীয় অবস্থানের জন্য data-placement = "top" ব্যবহার করুন। এটি ডিফল্ট তাই আপনাকে স্পষ্টভাবে উল্লেখ করার দরকার নেই।
  • নীচের অবস্থানের জন্য ডেটা-প্লেসমেন্ট = "বটম" ব্যবহার করুন।
  • সঠিক অবস্থানের জন্য data-placement = "right" ব্যবহার করুন।
  • বাম অবস্থানের জন্য ডেটা-প্লেসমেন্ট = "বাম" ব্যবহার করুন।

বোতামে 5 টুলটিপস

আসুন বোতাম কম্পোনেন্টে বিভিন্ন পজিশন সহ চারটি টুলটিপ তৈরি করি ।

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Tooltip on top </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> Tooltip on right </button> <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button> <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> Tooltip on left </button>

ব্রাউজারে ফলাফলটি নীচের মত হওয়া উচিত:

কিভাবে বুটস্ট্র্যাপ 5 টুলটিপ তৈরি করবেন?

6 টুলটিপের ভিতরে HTML বিষয়বস্তু ব্যবহার করা

ডিফল্টরূপে, টুলটিপ শুধুমাত্র ভিতরে টেক্সট কন্টেন্ট সমর্থন করে। আপনি ডাটা-এইচটিএমএল = "সত্য" বৈশিষ্ট্য ব্যবহার করে এইচটিএমএল ট্যাগ যুক্ত করতে পারেন । নীচে HTML ~…~ ট্যাগ ব্যবহার করে টুলটিপের ভিতরে স্ট্রাইকথ্রু সামগ্রী যুক্ত করার একটি উদাহরণ দেওয়া হল ।

<a href="#" data-toggle="tooltip" data-html="true" title="<s>This is a strikethrough tooltip</s>"> Content to Show </a>

আপনি দেখতে পাচ্ছেন, শিরোনাম ট্যাগের ভিতরের বিষয়বস্তু HTML ট্যাগ দিয়ে প্রক্রিয়া করা হয় যখন data-html = "true” অ্যাট্রিবিউট সেট করা থাকে। ব্রাউজারে এটি দেখতে কেমন হবে তা নীচে দেওয়া হল:

কিভাবে বুটস্ট্র্যাপ 5 টুলটিপ তৈরি করবেন?

7 টুলটিপ কাস্টমাইজ করার বিকল্প

আপনি "ডেটা-" বৈশিষ্ট্যগুলি ব্যবহার করে টুলটিপগুলি আরও কাস্টমাইজ করতে পারেন।

  • ডেটা-অ্যানিমেশন = "মিথ্যা" বৈশিষ্ট্য যোগ করে CSS ফেইডিং প্রভাব অক্ষম করুন।
  • ডেটা-বিলম্ব বৈশিষ্ট্যের সাথে বিলম্ব দেখান এবং লুকান।
  • ডাটা-অফসেট ব্যবহার করে উপাদান থেকে টুলটিপ অফসেট করুন।

আপনি পপার জাভাস্ক্রিপ্ট সাইট থেকে আরো টুলটিপ উদাহরণ উল্লেখ করতে পারেন ।

দ্রষ্টব্য: ব্রাউজার পপার সমর্থন করে না বলে বুটস্ট্র্যাপ 5 টুলটিপগুলি IE8 বা নিম্নের কাজ করবে না।


বুটস্ট্র্যাপ 5 শিখুন (সূচক )


রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত