CSS Cool Tooltips with Pure CSS - Hint.css

Doctor

Thread Starter
⭐⭐⭐⭐⭐⭐
Charismatic
Designer
Expert
Writer
Popular
King of Alkamunia
Proud Pakistani
🏆 ZH Top Poster in a Month Award 🕖
الکمونیا میں تو ایسا نہیں ہوتا
Top Poster
ITD Developer
Top Poster Of Month
Joined
Apr 25, 2018
Local time
5:27 PM
Threads
926
Messages
14,296
Reaction score
15,532
Points
2,036
Age
47
Location
Rawalpindi
Gold Coins
4,202.01
Get Unlimited Tags / Banners
Permanently Change Username Color & Style.
Get Unlimited Tags / Banners
Get Unlimited Tags / Banners
Thread Highlight Unlimited
Change Username Style.
پڑھتی آنکھوں اور چڑھتی سانسوں کو ڈاکٹر کا سلام

معزز اراکین! آج میں آپ کے لئے ایک سی ایس ایس جے کیوری ٹیوٹورئل پیش کر رہا ہوں امید ہے آپ لوگوں کو پسند آئے گا۔ اس حوالے سے آپ کی رائے اور سوالات کا انتظار رہے گا۔
تو آئیں اس ٹیوٹورئل کا آغاز کرتے ہیں۔


ہنٹ ڈاٹ سی ایس ایس ایک سی ایس ایس ٹول ٹِپ لائبریری ہے جو آپ کو اپنے ویب پیج ایلیمنٹس میں بہترین کسٹمائزڈ ٹول ٹِپ ایڈ کرنے کی سہولت فراہم کرتی ہے۔
ہنٹ ڈاٹ سی ایس ایس اور باقی ٹول ٹِپ پلگ انز کا بنیادی فرق data-* attribute, pseudo elements, content property اور CSS3 transitions کا استعمال ہے۔ نتیجتاً یہ پلگ ان تمام جدید براؤزرز کے ساتھ کمپیٹبل ہے جو کہ ایچ ٹی ایم ایل 5 اور سی ایس ایس3 کو مکمل سپورٹ کرتے ہیں۔




How to use it:
1
Include Hint.css in your page
HTML:
<link rel="stylesheet" href="hint.css">
2
Markup your link with at least 2 classes. Use data-hint attribute to add your tooltip text.
HTML:
<p> <a href="#" class="hint  hint--top" data-hint="jQueryScript.Net">Look, there is something over me.</a> </p>
3
Position Options

HTML:
class="hint hint--top"
class="hint hint--bottom"
class="hint hint--left"
class="hint hint--right"
4
Additionally, you can use other modifiers to style your tooltips
HTML:
view source
hint--error
hint--info
hint--warning
hint--success
hint--always
::dnld::
:down-pointing-backhand-index-emoji:

File Size: 18.7 KB
Official Website:
Please, Log in or Register to view URLs content!

License: MIT
Download Link:
Please, Log in or Register to view URLs content!

 
Top