আমি কীভাবে একটি স্প্যান উপাদানটিতে একটি সরঞ্জাম টিপ যুক্ত করব?

Question

নিম্নলিখিত কোডটিতে, আমি ব্যবহারকারীটির স্প্যানটি ঘুরে দেখলে একটি সরঞ্জাম-টিপ আসতে চাই, আমি কীভাবে এটি করব? আমি কোনও লিঙ্ক ব্যবহার করতে চাই না।

<span> text </span>

Answer 1

এখানে সহজ, অন্তর্নির্মিত উপায়:

<span title="My tip">text</span>

এটি আপনাকে সাধারণ পাঠ্য সরঞ্জামদণ্ড দেয়। যদি আপনি সেগুলিতে ফর্ম্যাট এইচটিএমএল সমৃদ্ধ সরঞ্জামদণ্ডগুলি চান তবে এটি করার জন্য আপনার একটি লাইব্রেরি ব্যবহার করতে হবে। ভাগ্যক্রমে যারা প্রচুর পরিমাণে আছে ।

Comments

তবে স্প্যানটিতে কোনও পাঠ্য না থাকলে এই কাজ করে? উদাহরণস্বরূপ কোনও বিজি-চিত্র সহ একটি ফাঁকা স্প্যান বলুন?

— অগিওয়ান

@ ইউজিএস: আপনি নিশ্চিত যে আপনার উপাদানটি এমন আকার বলে মনে হয় যা এটি বলে? এটি আমার মতো গোলাপী পটভূমি দেওয়ার চেষ্টা করুন। :-)

— রিচিহিন্দল

অনেক ধন্যবাদ.! তবে আমি সবেমাত্র টিপসি.জেএস ব্যবহার করেছি এবং আমি যা চেয়েছিলাম তা এটি আরও ভাল দেখাচ্ছে looks : ডি এবং এই নিবন্ধটি আমার বিভ্রান্তিতে সহায়তা করেছে: htmlgoodies.com / টিউটোরিয়ালস / html_401 / article.php / 3479661/… যেখানে এতে বলা হয়েছে যে

— টুলটিপটি

হাই, কেউ যদি কোনও কিছু / সমস্ত এইচটিএমএল স্বাদে মানসম্মত হয় তবে কি স্পষ্ট করে বলতে পারেন?

— জোনাথন ডস সান্টোস

@ জোনাথন: কমপক্ষে এইচটিএমএল 4: w3.org/TR/html4/struct/global.html#adef-title

— রিচিহিন্ডল

Answer 2

খাঁটি সিএসএস সহ কাস্টম টুলটিপস - জাভাস্ক্রিপ্টের দরকার নেই:

এখানে উদাহরণ (কোড সহ) / সম্পূর্ণ পর্দার উদাহরণ

ডিফল্ট titleঅ্যাট্রিবিউট টুলটিপসের বিকল্প হিসাবে , আপনি :before/ :after সিউডো উপাদান এবং HTML5 data-*বৈশিষ্ট্যগুলি ব্যবহার করে আপনার নিজস্ব কাস্টম সিএসএস টুলটিপগুলি তৈরি করতে পারেন ।

প্রদত্ত সিএসএস ব্যবহার করে, আপনি data-tooltipবৈশিষ্ট্যটি ব্যবহার করে কোনও উপাদানটিতে একটি টুলটিপ যুক্ত করতে পারেন ।

আপনি data-tooltip-positionবৈশিষ্ট্যটি (স্বীকৃত মান: top/ right/ bottom/ left) ব্যবহার করে কাস্টম টুলটিপের অবস্থানও নিয়ন্ত্রণ করতে পারেন ।

উদাহরণস্বরূপ, নিম্নলিখিতটি স্প্যান উপাদানটির নীচে অবস্থিত একটি সরঞ্জামদণ্ড যুক্ত করবে।

<span data-tooltip="Custom tooltip text." data-tooltip-position="bottom">Custom bottom tooltip.</span>

কিভাবে কাজ করে?

আপনি attr()ফাংশনটি ব্যবহার করে কাস্টম বৈশিষ্ট্য মানগুলি পুনরুদ্ধার করে সিউডো উপাদানগুলির সাথে কাস্টম টুলটিপগুলি প্রদর্শন করতে পারেন ।

[data-tooltip]:before {
    content: attr(data-tooltip);
}

টুলটিপটির অবস্থান নির্ধারণের ক্ষেত্রে, কেবলমাত্র বৈশিষ্ট্য নির্বাচনকারী ব্যবহার করুন এবং বৈশিষ্ট্যের মানের ভিত্তিতে স্থান পরিবর্তন করুন।

এখানে উদাহরণ (কোড সহ) / সম্পূর্ণ পর্দার উদাহরণ

উদাহরণে ব্যবহৃত সম্পূর্ণ সিএসএস - এটি আপনার প্রয়োজন অনুসারে কাস্টমাইজ করুন।

[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: help;
    padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 100px;
    text-align: center;
    border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
    bottom: 100%;
    margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
    left: 100%;
    margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
    top: 100%;
    margin-top: 6px;
}
[data-tooltip-position="left"]:before {
    right: 100%;
    margin-right: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
    left: 50%;
    margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
    top: 50%;
    margin-top: -6px;
}
[data-tooltip-position="top"]:after {
    bottom: 100%;
    border-width: 6px 6px 0;
    border-top-color: #000;
}
[data-tooltip-position="right"]:after {
    left: 100%;
    border-width: 6px 6px 6px 0;
    border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
    top: 100%;
    border-width: 0 6px 6px;
    border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
    right: 100%;
    border-width: 6px 0 6px 6px;
    border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}

Comments

নিবন্ধন করুন আমি এক পর্যায়ে এটি দেখতে হবে। ধন্যবাদ।

— জোশ ক্রোজিয়ার

হ্যাঁ আমি এটি পরীক্ষা করে দেখেছি এবং এটি কাজ করে না তা অবাকও হয়নি! ;)

— 14

@ জোশক্রোজায়ার এটি অনেক সাহায্য করেছে

— জিবিন বিজে

Answer 3

বেশিরভাগ ব্রাউজারগুলিতে শিরোনামের বৈশিষ্ট্যটি একটি টুলটিপ হিসাবে রেন্ডার হয় এবং এটি কোন ধরণের উপাদানগুলির সাথে কাজ করবে তা সাধারণত নমনীয়।

<span title="This will show as a tooltip">Mouse over for a tooltip!</span>
<a href="http://www.stackoverflow.com" title="Link to stackoverflow.com">stackoverflow.com</a>
<img src="something.png" alt="Something" title="Something">

এগুলি সমস্তই প্রতিটি ব্রাউজারে সরঞ্জামদণ্ডগুলি রেন্ডার করে।

Answer 4

বেসিক টুলটিপের জন্য, আপনি চান:

<span title="This is my tooltip"> Hover on me to see tooltip! </span>

Answer 5

"title"অ্যাট্রিবিউট ব্রাউজার দ্বারা টুলটিপ জন্য পাঠ্য হিসেবে ব্যবহার করা হবে, যদি আপনি শৈলী প্রয়োগ করতে এটি কিছু ব্যবহারের বিষয়ে বিবেচনা চান প্লাগিন