Uncategorized

আপনার ওয়েবসাইট এর জন্য 50 প্রকার Tooltips Style নিয়ে নিন। || Part 01

10 hours ago
10 hours ago
0 Comments

WELLCOME BACK

H

ello guys. How are you all? I hope you are all well. I came again with a post. Let’s go..

তো এই পোস্ট এ শেয়ার করবো ৫০ টি Tooltips Css style… যেগুলো আপনি আপনার ওয়েবসাইট এর যেকোনো জায়গায় ব্যবহার করতে পারবেন।

অনেকেই বুঝতে পারবেন না,যে এই পোস্ট এর মানে কি? তো বিস্তারিত বলে দিচ্ছি।

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

টুলটিপসের বৈশিষ্ট্য:

  • সংক্ষিপ্ত তথ্য: টুলটিপস সাধারণত সংক্ষিপ্ত এবং স্পষ্ট তথ্য প্রদান করে।
  • স্বয়ংক্রিয় প্রদর্শন: মাউস হোভার বা ফোকাস করলে স্বয়ংক্রিয়ভাবে প্রদর্শিত হয়।
  • অস্থায়ী: টুলটিপস সাধারণত অস্থায়ী এবং ব্যবহারকারী মাউস সরিয়ে নিলে বা ফোকাস হারালে এটি অদৃশ্য হয়ে যায়।
  • বহুমুখী: টেক্সট, ছবি, লিঙ্ক, বা অন্যান্য উপাদান ধারণ করতে পারে।

টুলটিপসের ব্যবহার:

  • ফর্ম ফিল্ডে নির্দেশনা: ফর্ম ফিল্ডে কী তথ্য প্রয়োজন তা ব্যাখ্যা করতে।
  • আইকনের অর্থ ব্যাখ্যা: আইকনের উদ্দেশ্য বা কার্যকারিতা ব্যাখ্যা করতে।
  • সংক্ষিপ্ত তথ্য প্রদান: কোনো এলিমেন্ট সম্পর্কে অতিরিক্ত তথ্য প্রদান করতে।
  • এক্সেসিবিলিটি উন্নত করতে: স্ক্রিন রিডার ব্যবহারকারীদের জন্য অতিরিক্ত তথ্য প্রদান করতে।

উদাহরণ:

  • একটি বাটনের উপর মাউস হোভার করলে টুলটিপসে লেখা থাকতে পারে: “এই বাটনে ক্লিক করে ফাইল আপলোড করুন।”
  • একটি আইকনের উপর মাউস হোভার করলে টুলটিপসে লেখা থাকতে পারে: “এই আইকনটি সেটিংস মেনু খোলে।”

টুলটিপস তৈরি:

টুলটিপস তৈরি করার জন্য বিভিন্ন প্রোগ্রামিং ভাষা এবং ফ্রেমওয়ার্কে বিভিন্ন পদ্ধতি রয়েছে। উদাহরণস্বরূপ:

  • HTML/CSS: title অ্যাট্রিবিউট ব্যবহার করে সাধারণ টুলটিপস তৈরি করা যায়।
  • JavaScript: jQuery বা অন্যান্য লাইব্রেরি ব্যবহার করে আরও উন্নত টুলটিপস তৈরি করা যায়।
  • CSS ফ্রেমওয়ার্ক: Bootstrap, Materialize ইত্যাদি ফ্রেমওয়ার্কে প্রি-বিল্ট টুলটিপস কম্পোনেন্ট রয়েছে।

উদাহরণ (HTML):

উদাহরণ (Bootstrap):

নোট: এই উদাহরণটি কাজ করার জন্য Bootstrap এর JavaScript এবং CSS ফাইল প্রয়োজন।

আশা করি বুঝতে পারছেন। তো আমি ৫০ টি Tooltips style দিবো কিন্তু একটি পোস্ট এ ৫০ টি দেওয়া যাবে না পোস্ট অনেক বড় হবে তাই ৫টি Part এর মাধ্যমে দিয়ে দিবো।



This is a Tooltip with a gradient coloration and without border radius

প্রতিটি Style এর Html এটি হবে তাই প্রতিটির CSS দিবো আর HTML এটি ব্যবহার করবেন।

Arrow পজিশন→


--p: 50%; /* triangle position (0%:left 100%:right) */

এখানে 50%: যে আছে এটি কম বেশি করলে Arrow/triangle এর পজিশন change হতে থাকবে।

Code 1→


.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  /* triangle dimension */
  --b: 2em; /* base */
  --h: 1em; /* height */

  --p: 50%; /* triangle position (0%:left 100%:right) */

  padding: 1em;
  clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
    min(100%,var(--p) + var(--b)/2) 100%,
    var(--p) calc(100% + var(--h)),
    max(0%  ,var(--p) - var(--b)/2) 100%);
  border-image: fill 0//var(--h)
    conic-gradient(#CC333F 0 0); /* the color */
}

Example:

Code 2 →


.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  /* triangle dimension */
  --b: 2em; /* base */
  --h: 1em; /* height */

  --p: 50%; /* triangle position (0%:left 100%:right) */
  
  padding: 1em;
  clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
    min(100%,var(--p) + var(--b)/2) 0,
    var(--p) calc(-1*var(--h)),
    max(0%  ,var(--p) - var(--b)/2) 0);
  border-image: fill 0//var(--h)
    conic-gradient(#79BD9A 0 0); /* the color */
}

Example:

Code 3→


.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  /* triangle dimension */
  --b: 2em; /* base */
  --h: 1em; /* height */

  --p: 50%; /* triangle position (0%:top 100%:bottom) */
  
  padding: 1em;
  clip-path: polygon(100% 100%,0 100%,0 0,100% 0,
    100% max(0%  ,var(--p) - var(--b)/2),
    calc(100% + var(--h)) var(--p),
    100% min(100%,var(--p) + var(--b)/2));
  border-image: fill 0//var(--h)
    conic-gradient(#8A9B0F 0 0); /* the color */
}

Example:

Code 4→


.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  /* triangle dimension */
  --b: 2em; /* base */
  --h: 1em; /* height */

  --p: 50%; /* triangle position (0%:top 100%:bottom) */
  
  padding: 1em;
  clip-path: polygon(0 100%,100% 100%,100% 0,0 0,
    0 max(0%  ,var(--p) - var(--b)/2),
    calc(-1*var(--h)) var(--p),
    0 min(100%,var(--p) + var(--b)/2));
  border-image: fill 0//var(--h)
    conic-gradient(#EB6841 0 0); /* the color */
}

Example:

Code 5→


.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  /* triangle dimension */
  --b: 2em; /* base */
  --h: 1em; /* height */

  --p: 50%; /* triangle position (0%:left 100%:right) */
  --r: 1.2em; /* the radius */
  --c: #4ECDC4;

  padding: 1em;
  border-radius: var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/2) min(var(--r),var(--p) - var(--b)/2)/var(--r);
  clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
    min(100%,var(--p) + var(--b)/2) 100%,
    var(--p) calc(100% + var(--h)),
    max(0%  ,var(--p) - var(--b)/2) 100%);
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) fill 0/
    var(--r) calc(100% - var(--p) - var(--b)/2) 0 calc(var(--p) - var(--b)/2)/
    0 0 var(--h) 0;
}

Example:

Code 6→


.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  /* triangle dimension */
  --b: 2em; /* base */
  --h: 1em; /* height */

  --p: 50%; /* triangle position (0%:left 100%:right) */
  --r: 1.2em; /* the radius */
  --c: #6A4A3C;

  padding: 1em;
  border-radius: min(var(--r),var(--p) - var(--b)/2) min(var(--r),100% - var(--p) - var(--b)/2) var(--r) var(--r)/var(--r);
  clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
    min(100%,var(--p) + var(--b)/2) 0,
    var(--p) calc(-1*var(--h)),
    max(0%  ,var(--p) - var(--b)/2) 0);
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) fill 0/
    0 calc(100% - var(--p) - var(--b)/2) var(--r) calc(var(--p) - var(--b)/2)/
    var(--h) 0 0 0;
}

Example:

Code 7→


.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  /* triangle dimension */
  --b: 2em; /* base */
  --h: 1em; /* height */

  --p: 50%; /* triangle position (0%:top 100%:bottom) */
  --r: 1.2em; /* the radius */
  --c: #563444;

  padding: 1em;
  border-radius: var(--r)/var(--r) min(var(--r),var(--p) - var(--b)/2) min(var(--r),100% - var(--p) - var(--b)/2) var(--r);
  clip-path: polygon(100% 100%,0 100%,0 0,100% 0,
    100% max(0%  ,var(--p) - var(--b)/2),
    calc(100% + var(--h)) var(--p),
    100% min(100%,var(--p) + var(--b)/2));
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) fill 0/
    calc(var(--p) - var(--b)/2) 0 calc(100% - var(--p) - var(--b)/2) var(--r)/
    0 var(--h) 0 0;
}

Example:

Code 8→


.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  /* triangle dimension */
  --b: 2em; /* base */
  --h: 1em; /* height */

  --p: 50%; /* triangle position (0%:top 100%:bottom) */
  --r: 1.2em; /* the radius */
  --c: #cf9d38;

  padding: 1em;
  border-radius: var(--r)/min(var(--r),var(--p) - var(--b)/2) var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/2);
  clip-path: polygon(0 100%,100% 100%,100% 0,0 0,
    0 max(0%  ,var(--p) - var(--b)/2),
    calc(-1*var(--h)) var(--p),
    0 min(100%,var(--p) + var(--b)/2));
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) fill 0/
    calc(var(--p) - var(--b)/2) var(--r) calc(100% - var(--p) - var(--b)/2) 0/
    0 0 0 var(--h);
}

Example:

Code 9→



.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  /* triangle dimension */
  --b: 2em; /* base */
  --h: 1em; /* height */

  --p: 50%; /* triangle position (0%:left 100%:right) */

  padding: 1em;
  clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
    min(100%,var(--p) + var(--b)/2) 100%,
    var(--p) calc(100% + var(--h)),
    max(0%  ,var(--p) - var(--b)/2) 100%);
  border-image: fill 0//0 0 var(--h) 0
    linear-gradient(60deg,#CC333F,#79BD9A); /* the gradient */
}

Example:

Code 10→


.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  /* triangle dimension */
  --b: 2em; /* base */
  --h: 1em; /* height */

  --p: 50%; /* triangle position (0%:left 100%:right) */
  
  padding: 1em;
  clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
    min(100%,var(--p) + var(--b)/2) 0,
    var(--p) calc(-1*var(--h)),
    max(0%  ,var(--p) - var(--b)/2) 0);
  border-image: fill 0//var(--h) 0 0 0
    linear-gradient(-60deg,#8A9B0F,#EB6841); /* the gradient */
}

Example:

তো আজ এই পর্যন্তই। পরের পর্বের জন্য অপেক্ষায় থাকুন।

THE END

S

o friends, that’s it for today. See you in another post. If you like the post then like and comment. Stay tuned to Trickbd.com for any updates.

Shares:
Leave a Reply