উদাহরণ:
<a href="example.com" title="My site"> Link </a>আমি কীভাবে ব্রাউজারে "শিরোনাম" বৈশিষ্ট্যের উপস্থাপনা পরিবর্তন করব? ডিফল্টরূপে, এর সবে হলুদ ব্যাকগ্রাউন্ড এবং ছোট ফন্ট রয়েছে। আমি এটিকে আরও বড় করতে এবং পটভূমির রঙ পরিবর্তন করতে চাই।
শিরোনাম বৈশিষ্ট্যটি স্টাইল করার কোনও সিএসএস উপায় আছে?
উত্তর:
এটি কীভাবে করা যায় তার একটি উদাহরণ এখানে দেওয়া হয়েছে:
a.tip {
border-bottom: 1px dashed;
text-decoration: none
}
a.tip:hover {
cursor: help;
position: relative
}
a.tip span {
display: none
}
a.tip:hover span {
border: #c0c0c0 1px dotted;
padding: 5px 20px 5px 5px;
display: block;
z-index: 100;
background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
left: 0px;
margin: 10px;
width: 250px;
position: absolute;
top: 10px;
text-decoration: none
}<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>দেখে মনে হচ্ছে বাস্তবে একটি খাঁটি সিএসএস সমাধান রয়েছে, কেবলমাত্র সিএসএস attrএক্সপ্রেশন, উত্পন্ন সামগ্রী এবং বৈশিষ্ট্য নির্বাচকদের (যা এটি IE8 এর মতো পিছনে কাজ করে) বোঝায়:
a[title]:hover:after {
content: attr(title);
position: absolute;
}
সূত্র: https://jsfiddle.net/z42r2vv0/2/
@ ভাইরোস্কর থেকে ডাব্লু / ইনপুট আপডেট করুন: দয়া করে নোট করুন যে কোনও নির্দিষ্ট বৈশিষ্ট্য ব্যবহার করা প্রয়োজন নয়, যদিও আমি উপরের উদাহরণে "শিরোনাম" বৈশিষ্ট্যটি ব্যবহার করেছি; আসলে আমার সুপারিশটি হ'ল "Alt" বৈশিষ্ট্যটি ব্যবহার করা, কারণ এই কনটেন্টটি সিএসএস থেকে সুবিধা অর্জন করতে অক্ষম ব্যবহারকারীদের কাছে অ্যাক্সেসযোগ্য হবে।
আপডেট আবার আমি কোড পরিবর্তন করছি না কারণ "শিরোনাম" বৈশিষ্ট্যটি মূলত "টুলটিপ" বৈশিষ্ট্যটি বোঝাতে এসেছে এবং কেবল ক্ষেত্রের ভিতরে গুরুত্বপূর্ণ পাঠ্যটি কেবল হোভারে অ্যাক্সেসযোগ্য লুকিয়ে রাখা ভাল ধারণা নয় তবে আপনি যদি হন এই পাঠ্যটিকে "আরিয়া-লেবেল" বৈশিষ্ট্যটি অ্যাক্সেসযোগ্য করে তুলতে আগ্রহী এটির জন্য সেরা জায়গা বলে মনে হচ্ছে: https://developer.mozilla.org/en-US/docs/Web/Acecessibility/ARIA/ARIA_T কৌশল / Use_the_aria-label_attribute
stacking context। নতুন স্ট্যাকিং প্রসঙ্গ এবং খাঁটি সিএসএস টুলটিপগুলি তৈরি করা positionব্যতীত অন্য সমস্ত উপাদান বাইরে দৃশ্যমান নয় বা এ জাতীয় স্ট্যাকিং প্রসঙ্গে অতিক্রম করতে পারে না , সুতরাং আপনার যদি অবস্থানের সাথে দৃ tight় উপাদান থাকে তবে আপনার সিএসএস টুলটিপটি দৃশ্যমান হবে না। একমাত্র সমাধানটি শীর্ষস্থানীয় স্ট্যাকিং প্রসঙ্গে (যেমন ) জাভাস্ক্রিপ্টের জন্য সরঞ্জামটিপ সংযুক্ত করা । staticrelative<body>
titleবৈশিষ্ট্যটি স্টাইল করতে পারবেন নাtitleবৈশিষ্ট্যের পাঠ্য কীভাবে প্রদর্শিত হয় তা ব্রাউজার দ্বারা সংজ্ঞায়িত করা হয় এবং ব্রাউজার থেকে ব্রাউজারে পরিবর্তিত হয়। ব্রাউজারটি titleবৈশিষ্ট্যের উপর ভিত্তি করে ব্রাউজারটি প্রদর্শন করে এমন সরঞ্জামদণ্ডে কোনও ওয়েবপৃষ্ঠার জন্য কোনও স্টাইল প্রয়োগ করা সম্ভব নয় ।
তবে আপনি অন্যান্য বৈশিষ্ট্য ব্যবহার করে খুব অনুরূপ কিছু তৈরি করতে পারেন।
data-title) দিয়ে সিউডো-টুলটিপ তৈরি করতে পারেনএই জন্য, আমি একটি data-titleবৈশিষ্ট্য ব্যবহার করব । data-*বৈশিষ্ট্যগুলি হ'ল ডিওএম উপাদান / এইচটিএমএলে কাস্টম ডেটা সঞ্চয় করার একটি পদ্ধতি। এগুলি অ্যাক্সেস করার একাধিক উপায় রয়েছে । গুরুত্বপূর্ণভাবে, তারা সিএসএস দ্বারা নির্বাচিত হতে পারে।
প্রদত্ত আপনার সাথে উপাদানের নির্বাচন করতে সিএসএস ব্যবহার করতে পারেন data-titleবৈশিষ্ট্য, তাহলে আপনি তৈরি করতে সিএসএস ব্যবহার করতে পারেন :after(অথবা :before) contentঅ্যাট্রিবিউট ব্যবহার করে এর মান রয়েছে সেটা attr()।
আরও বড় এবং একটি ভিন্ন পটভূমির রঙ সহ (প্রশ্নের অনুরোধ অনুযায়ী):
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: #00FF00;
color: #111;
font-size: 150%;
position: absolute;
padding: 1px 5px 2px 5px;
bottom: -1.6em;
left: 100%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}<a href="example.com" data-title="My site"> Link </a> with styled tooltip (bigger and with a different background color, as requested in the question)<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltipআরও বিস্তৃত স্টাইলিং ( এই ব্লগ পোস্ট থেকে অভিযোজিত ):
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
position: absolute;
bottom: -1.6em;
left: 100%;
padding: 4px 4px 4px 8px;
color: #222;
white-space: nowrap;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f8f8),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -ms-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -o-linear-gradient(top, #f8f8f8, #cccccc);
opacity: 0;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}<a href="example.com" data-title="My site"> Link </a> with styled tooltip<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltipএকটি বাস্তব titleটুলটিপ থেকে পৃথক, উপরের সিএসএস দ্বারা উত্পাদিত সরঞ্জামদণ্ডটি প্রয়োজনীয়ভাবে পৃষ্ঠায় দৃশ্যমান হওয়ার গ্যারান্টিযুক্ত নয় (অর্থাত্ এটি দৃশ্যমান অঞ্চলের বাইরেও থাকতে পারে)। অন্যদিকে, এটি বর্তমান উইন্ডোর মধ্যে থাকার নিশ্চয়তা রয়েছে, যা প্রকৃত সরঞ্জামদণ্ডের ক্ষেত্রে নয়।
তদ্ব্যতীত, সিউডো-টুলটিপটি মৌলটি যে মৌলের উপর রয়েছে তার তুলনায় সিউডো-টুলটিপযুক্ত উপাদানটির সাথে তুলনামূলকভাবে অবস্থান করে has আপনি সিউডো-টুলটিপ প্রদর্শিত হবে যেখানে সূক্ষ্ম-সুর করতে চাইতে পারেন। এটি উপাদানটির সাথে সম্পর্কিত কোনও পরিচিত অবস্থানে উপস্থিত হওয়া পরিস্থিতির উপর নির্ভর করে কোনও উপকার বা ঘাটতি হতে পারে।
:beforeবা :afterউপাদান যা পাত্রে করা হয় না"একটি ইনপুট ক্ষেত্রে সিউডো-এলিমেন্টের আগে: বা পরে: আমি কি একটি ব্যবহার করতে পারি?" এই উত্তরের একটি ভাল ব্যাখ্যা রয়েছে ?
কার্যকরীভাবে, এর অর্থ এই যে তোমার মত উপাদানে সরাসরি এই পদ্ধতি ব্যবহার করা যাবে না <input type="text"/>, <textarea/>, <img>, ইত্যাদি সহজ সমাধান একটি উপাদান যে একটি ধারক নয় মোড়ানো হয় <span>বা <div>এবং ধারক উপর সিউডো-টুলটিপ আছে।
একটি ধারকহীন <span>উপাদান মোড়ানোর জন্য সিউডো-টুলটিপ ব্যবহারের উদাহরণ :
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: #00FF00;
color: #111;
font-size: 150%;
position: absolute;
padding: 1px 5px 2px 5px;
bottom: -1.6em;
left: 100%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}
.pseudo-tooltip-wrapper {
/*This causes the wrapping element to be the same size as what it contains.*/
display: inline-block;
}Text input with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="input type="text""><input type='text'></span><br/><br/><br/>
Textarea with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="this is a textarea"><textarea data-title="this is a textarea"></textarea></span><br/>উপরে লিঙ্ক করা ব্লগ পোস্টের কোড থেকে (যা আমি এখানে প্রথমে উত্তরে দেখেছি যে এটি চুরি করেছে), data-*এট্রিবিটের পরিবর্তে কোনও বৈশিষ্ট্য ব্যবহার করা আমার কাছে স্পষ্ট বলে মনে হয়েছিল title। এটি করার জন্য সেই উত্তরের (এখন মুছে ফেলা) উত্তরে স্নোসটর্ম দ্বারা একটি মন্তব্যেও পরামর্শ দেওয়া হয়েছিল ।
input[type='text']বা এর মতো উপাদানের ক্ষেত্রে প্রযোজ্য নয় textareaতবে কেন তা আমি জানি না। কেউ কি ব্যাখ্যা করতে পারেন?
:beforeএবং :afterউপাদানগুলি পাত্রে নয় এমন উপাদানগুলিতে কাজ করে না। উত্তরের একটি ভাল ব্যাখ্যা আছে: আমি কি একটি ইনপুট ক্ষেত্রে সিউডো-এলিমেন্টের পরে: বা আগে: ব্যবহার করতে পারি? এই পদ্ধতি ব্যবহার করার জন্য, এটি সম্ভবত উপাদান যা একটি পাত্রে নয় মোড়ানো সবচেয়ে সহজ পদ্ধিতি হল <span>বা <div>যার উপর আপনি করা data-titleঅ্যাট্রিবিউট। আপনি সম্ভবত তাদের দিতে চাইবেন display: inline-block;যে হিসাবে তাদের একই আকার করবে <input>বা <textarea>। আমি একটি উত্তর দিয়ে এই উত্তর আপডেট করেছি।
সিএসএস সরঞ্জামদণ্ডের উপস্থিতি পরিবর্তন করতে পারে না। এটি ব্রাউজার / ওএস-নির্ভর। আপনি যদি অন্যরকম কিছু চান তবে আপনাকে যখন ডিফল্ট টুলটিপের পরিবর্তে উপাদানটির উপর ঘুরে বেড়াতে হবে তখন মার্কআপ তৈরি করতে আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করতে হবে।
আমি ভেবেছিলাম আমি আমার 20 টি লাইন জাভাস্ক্রিপ্ট সমাধান এখানে পোস্ট করব। এটি নিখুঁত নয়, তবে আপনার সরঞ্জামদণ্ড থেকে আপনার প্রয়োজনের উপর নির্ভর করে কারও পক্ষে এটি কার্যকর হতে পারে।
কখন এটি ব্যবহার করবেন
TITLEবৈশিষ্ট্য সংজ্ঞায়িত করে স্বয়ংক্রিয়ভাবে টুলটিপ স্টাইল করে (এটি ভবিষ্যতে ডকুমেন্টটিতে গতিযুক্ত যুক্ত উপাদান অন্তর্ভুক্ত করে)TITLEবৈশিষ্ট্য, শব্দার্থগতভাবে পরিষ্কার)কখন ব্যবহার করবেন না
কোড
// Use a closure to keep vars out of global scope
(function () {
var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
showAt = function (e) {
var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
$("#" + ID).html($(e.target).data(DATA)).css({
position: "absolute", top: ntop, left: nleft
}).show();
};
$(document).on("mouseenter", "*[title]", function (e) {
$(this).data(DATA, $(this).attr("title"));
$(this).removeAttr("title").addClass(CLS_ON);
$("<div id='" + ID + "' />").appendTo("body");
showAt(e);
});
$(document).on("mouseleave", "." + CLS_ON, function (e) {
$(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
$("#" + ID).remove();
});
if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());এটিকে যে কোনও জায়গায় আটকে দিন, এটি DOM প্রস্তুত হওয়ার আগে এই কোডটি চালানোর পরেও কাজ করবে (এটি DOM প্রস্তুত না হওয়া পর্যন্ত আপনার সরঞ্জামদণ্ডগুলি প্রদর্শন করবে না)।
কাস্টমাইজ
আপনি varকিছুটা কাস্টমাইজ করতে দ্বিতীয় লাইনে ঘোষণাগুলি পরিবর্তন করতে পারেন ।
var ID = "tooltip"; // The ID of the styleable tooltip
var CLS_ON = "tooltip_ON"; // Does not matter, make it somewhat unique
var FOLLOW = true; // TRUE to enable mouse following, FALSE to have static tooltips
var DATA = "_tooltip"; // Does not matter, make it somewhat unique
var OFFSET_X = 20, OFFSET_Y = 10; // Tooltip's distance to the cursorশৈলী
আপনি এখন নিম্নলিখিত সিএসএস ব্যবহার করে আপনার সরঞ্জামদণ্ডগুলি স্টাইল করতে পারেন:
#tooltip {
background: #fff;
border: 1px solid red;
padding: 3px 10px;
}আমি উত্তরটি এখানে পেয়েছি: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/
আমার নিজস্ব কোডটি এর মতো চলেছে, আমি বৈশিষ্ট্যের নামটি পরিবর্তন করেছি, যদি আপনি একই লেখার জন্য দুটি পপআপ সমাপ্ত বৈশিষ্ট্যের জন্য শিরোনামের নামটি বজায় রাখেন তবে অন্য পরিবর্তনটি হ'ল আমার লেখাটি উন্মুক্ত পাঠ্যের নীচে প্রদর্শিত হবে over
.tags {
display: inline;
position: relative;
}
.tags:hover:after {
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: -34px;
color: #fff;
content: attr(glose);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 350px;
}
.tags:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 0 6px 6px 6px;
bottom: -4px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}<a class="tags" glose="Text shown on hovering">Exposed text</a>কাস্টম টুলটিপ প্যাটার্নের জন্য একটি jsfiddle এখানে
এটি সিএসএস পজিশনিং এবং pseduo শ্রেণি নির্বাচকদের উপর ভিত্তি করে
সিউডো ক্লাসের ক্রস ব্রাউজার সমর্থনের জন্য MDN ডক্স পরীক্ষা করুন
<!-- HTML -->
<p>
<a href="http://www.google.com/" class="tooltip">
I am a
<span> (This website rocks) </span></a> a developer.
</p>
/*CSS*/
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
a.tooltip:hover span, a.tooltip:focus span {
display:block;
position:absolute;
top:1em;
left:1.5em;
padding: 0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:#000;
}নেটিভ টুলটিপ স্টাইল করা যায় না।
বলা হচ্ছে, আপনি এমন কিছু লাইব্রেরি ব্যবহার করতে পারেন যা উপাদানগুলি আড়াল করার সময় স্টাইলগুলি ভাসমান স্তরগুলি দেখায় (নেটিভ টুলটিপসের পরিবর্তে, এবং সেগুলি দমন করে) খুব কম বা কোনও কোড পরিবর্তন করার প্রয়োজন হয় ...
titleবৈশিষ্ট্য থাকে তবে আপনি দেশীয় সরঞ্জামদণ্ডগুলি দমন করতে পারেন । সুতরাং আপনি যদি নিজের নিজস্ব টুলটিপ বাস্তবায়ন সেট আপ করেন তবে এর data-tipপরিবর্তে অন্য কিছু বৈশিষ্ট্য (বলুন ) ব্যবহার করা ভাল title।
আপনি ডিফল্ট ব্রাউজার টুলটিপ স্টাইল করতে পারবেন না। তবে আপনি নিজের কাস্টম এইচটিএমএল টুলটিপগুলি তৈরি করতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন।
a[title="My site"] {
color: red;
}এটি উদাহরণস্বরূপ আপনি যুক্ত করতে চান এমন কোনও বৈশিষ্ট্যের সাথেও কাজ করে:
এইচটিএমএল
<div class="my_class" anything="whatever">My Stuff</div>সিএসএস
.my_class[anything="whatever"] {
color: red;
}এটি এখানে কাজ করুন দেখুন: http://jsfiddle.net/vpYWE/1/
anythingকোনও বৈধ HTML বৈশিষ্ট্য নয়। কাস্টম বৈশিষ্ট্যের জন্য বৈশিষ্ট্যগুলি ব্যবহার করুন data-।