یہ مضمون سادہ جاوا اسکرپٹ کا استعمال کرتے ہوئے ٹول ٹپ کا مظاہرہ کرے گا۔
سادہ جاوا اسکرپٹ ٹول ٹپ کیسے بنائیں؟
جاوا اسکرپٹ کا استعمال کرتے ہوئے ٹول ٹپ بنانے کے لیے، ' ماؤس اوور 'اور' ماؤس آؤٹ ' تقریبات. بہتر تفہیم کے لیے ذیل میں دی گئی مثالوں پر عمل کریں۔
مثال 1: جاوا اسکرپٹ کا استعمال کرتے ہوئے ٹول ٹِپ
دی گئی مثال میں، ہم خالص جاوا اسکرپٹ میں ٹول ٹِپ بنائیں گے اور ٹول ٹِپ کو اسٹائل بھی کریں گے انداز ' وصف.
سب سے پہلے، ایک متن بنائیں جہاں ہم ماؤس اوور ایونٹ پر ٹول ٹپ دکھانا چاہتے ہیں:
< h5 آئی ڈی = 'متن' > لینکس h5 >
متن حاصل کریں جہاں ٹول ٹپ ظاہر ہوگا ' getElementById() طریقہ:
جہاں lh = دستاویز getElementById ( 'متن' ) ;
اب، کال کریں ' AddEventListener() 'پاس کرنے کا طریقہ' ماؤس اوور ' ایونٹ اور ایک فنکشن () بطور پیرامیٹر۔ متعین فنکشن میں، سب سے پہلے، ہم ایک ٹول ٹپ بنائیں گے ' div ' عنصر، متن کو سیٹ کریں جو ہوور پر دکھایا جائے گا، اور ' کا استعمال کرتے ہوئے ٹول ٹپ کا کچھ اسٹائل ترتیب دیں انداز ' وصف. آخر میں، 'کا استعمال کرتے ہوئے ٹول ٹپ شامل کریں appendChild() طریقہ:
lh EventListener شامل کریں۔ ( 'ماؤس اوور' ، فنکشن ( ) {ٹول ٹپ تھا = دستاویز تخلیق عنصر ( 'div' ) ;
ٹول ٹپ اندرونی ایچ ٹی ایم ایل = 'ہنر سیکھنے کے لیے بہترین ویب سائٹ' ;
ٹول ٹپ انداز . مرئیت = 'مرئی' ;
ٹول ٹپ انداز . پوزیشن = 'مطلق' ;
ٹول ٹپ انداز . پس منظر کا رنگ = 'rgb(107, 101, 101)' ;
ٹول ٹپ انداز . بھرتی = '5px' ;
ٹول ٹپ انداز . بارڈر ریڈیئس = '3px' ;
ٹول ٹپ انداز . رنگ = 'سفید' ;
ٹول ٹپ انداز . بائیں = 'پچاس٪' ;
ٹول ٹپ انداز . چوڑائی = '200px' ;
دستاویز جسم . بچے کو شامل کریں۔ ( ٹول ٹپ ) ;
} ) ;
یہاں، استعمال کریں ' ماؤس آؤٹ ' ایونٹ جو ٹول ٹپ کو ہٹا دے گا جبکہ کرسر متن سے دور ہو جائے گا:
lh EventListener شامل کریں۔ ( 'ماؤس آؤٹ' ، فنکشن ( ) {
دستاویز جسم . بچے کو ہٹا دیں ( ٹول ٹپ ) ;
} ) ;
آؤٹ پٹ
مثال 2: CSS کے ساتھ JavaScript کا استعمال کرتے ہوئے ٹول ٹِپ
آپ CSS کے ساتھ JavaScript میں ٹول ٹِپ بھی بنا سکتے ہیں۔
ایسا کرنے کے لیے، ٹیگ کا استعمال کرتے ہوئے ٹول ٹپ کے متن کو دکھانے کے لیے ایک علاقہ بنائیں اور ایک id تفویض کریں۔ #myTooltip ”:
< اسپین آئی ڈی = 'myTooltip' >> مدت >' کا استعمال کرتے ہوئے متن کے حوالہ جات اور ٹول ٹپ حاصل کریں getElementById() طریقہ:
جہاں lh = دستاویز getElementById ( 'متن' ) ;ٹول ٹپ تھا = دستاویز getElementById ( 'myTooltip' ) ;
ٹول ٹپ پر کال کریں ' ماؤس اوور ' کا استعمال کرتے ہوئے فنکشن میں متن کو ترتیب دے کر واقعہ اندرونی ایچ ٹی ایم ایل جائیداد:
lh EventListener شامل کریں۔ ( 'ماؤس اوور' ، فنکشن ( ) {ٹول ٹپ انداز . مرئیت = 'مرئی' ;
ٹول ٹپ اندرونی ایچ ٹی ایم ایل = 'ہنر سیکھنے کے لیے بہترین ویب سائٹ' ;
} ) ;
ٹول ٹپ کو چھپائیں ' ماؤس آؤٹ ' واقعہ ترتیب دے کر ' مرئیت ' جائیداد کو ' چھپا ہوا ”:
lh EventListener شامل کریں۔ ( 'ماؤس آؤٹ' ، فنکشن ( ) {ٹول ٹپ انداز . مرئیت = 'چھپا ہوا' ;
} ) ;
آئی ڈی بنائیں' #myTooltip اسٹائل شیٹ میں جو ٹول ٹپ کو اسٹائل کرے گا:
#myTooltip {مرئیت : چھپا ہوا ;
چوڑائی : 200px ;
کے ساتھ - انڈیکس : 1 ;
پس منظر - رنگ : آر جی بی ( 107 , 101 , 101 ) ;
متن - سیدھ میں لانا : مرکز ;
رنگ : سفید ;
بھرتی : 5px 0 ;
سرحد - رداس : 3px ;
بائیں : پچاس %;
}
جیسا کہ آپ دیکھ سکتے ہیں کہ ٹول ٹپ کو کامیابی کے ساتھ متن پر لاگو کیا گیا ہے:
HTML اور CSS کا استعمال کرتے ہوئے ٹول ٹِپ کیسے بنائیں؟
آپ جاوا اسکرپٹ کے بغیر بھی ٹول ٹِپ بنا سکتے ہیں۔ HTML فائل میں، ٹیکسٹ بنائیں ' لینکس ”، جہاں ٹول ٹپ اس پر منڈلاتے ہوئے دکھایا جائے گا۔ ہیڈنگ/ٹیکسٹ
ٹیگ کے اندر ٹول ٹپ کے لیے ٹیکسٹ سیٹ کرنے کے لیے عنصر بنائیں:
< h5 کلاس = 'ٹول ٹپ' >
لینکس
< مدت کلاس = 'ٹول ٹپ ٹیکسٹ' >
ہنر سیکھنے کا ایک پلیٹ فارم
مدت >
h5 >
اسٹائل شیٹ میں، ایک کلاس یا ایک آئی ڈی بنائیں جو HTML عناصر کو تفویض کی جائے گی۔ یہاں، ہم ایک کلاس بنائیں گے ' ٹول ٹپ 'جو عنوان کو تفویض کیا گیا ہے:
. ٹول ٹپ {
پوزیشن : رشتہ دار ;
ڈسپلے : ترتیب سے - بلاک ;
}
کلاس کی وضاحت کریں ' ٹول ٹپ ٹیکسٹ 'ٹول ٹپ کے متن کو اسٹائل کرنے اور اسے HTML تفویض کرنے کے لئے' ٹیگ:
. ٹول ٹپ ٹیکسٹ {
مرئیت : چھپا ہوا ;
چوڑائی : 150px ;
پس منظر - رنگ : آر جی بی ( 107 , 101 , 101 ) ;
رنگ : #fff ;
متن - سیدھ میں لانا : مرکز ;
بھرتی : 5px 0 ;
سرحد - رداس : 3px ;
پوزیشن : مطلق ;
کے ساتھ - انڈیکس : 1 ;
نیچے : 125 %;
بائیں : پچاس %;
مارجن - بائیں : - 60px ;
دھندلاپن : 0 ;
منتقلی : دھندلاپن 0.3s ;
}
سیٹ کریں ' ہوور 'کے ساتھ اثر' ٹول ٹپ ہوور اثر پر ٹول ٹپ دکھانے کے لیے کلاس:
. ٹول ٹپ : ہوور ٹول ٹپ ٹیکسٹ {
مرئیت : نظر آنے والا ;
دھندلاپن : 1 ;
}
آؤٹ پٹ
ہم نے سادہ جاوا اسکرپٹ ٹول ٹپ سے متعلقہ تمام ضروری ہدایات مرتب کر لی ہیں۔
نتیجہ
جاوا اسکرپٹ کا استعمال کرتے ہوئے ٹول ٹپ بنانے کے لیے، ' ماؤس اوور 'اور' ماؤس آؤٹ ایونٹس، جو عنصر پر ہوور پر ٹول ٹِپ دکھاتا ہے اور ماؤس آؤٹ ایونٹ کے متحرک ہونے پر اسے چھپا دیتا ہے۔ ٹول ٹپ کو اسٹائل کرنے کے لیے، ' انداز 'جاوا اسکرپٹ میں انتساب۔ اس مضمون میں، ہم نے سادہ JavaScript، CSS کے ساتھ JavaScript، اور JavaScript کے بغیر ٹول ٹپ کا استعمال کرتے ہوئے ٹول ٹِپ بنانے کی بہترین ممکنہ مثالوں کا مظاہرہ کیا۔