jQuery tooltip tutorial | SP Foundationbd

বিভিন্ন সাইটে দেখে থাকবেন কোন text, button, link ইত্যাদির উপর mouse নিয়ে গেলে মাউসের আশেপাশে কিছু অতিরিক্ত বর্ননা দেখায় এটাই টুলটিপ।আমি এখানে একটা ফর্মের জন্য tooltip তৈরী করে দেখাচ্ছি যেখানে প্রতিটি form ফিল্ডের উপর mouse নিয়ে গেলে এই ফিল্ডে কি ধরনের তথ্য দিয়ে পুরন করতে হবে তা দেখাবে।

index.html ফাইল

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<title>SPFoundationbd ToolTip tutorials</title>

05.<link rel="stylesheet" href="/style.css" type="text/css">

06.<script type="text/javascript" src="/jquery_latest.js"></script>

07.<script type="text/javascript" src="/script.js"></script>

08.</head>

09.<body>

10.<h2>Fill up form and hit submit</h2>

11.<div id="form_container">

12.<form id="reg_form" action="" method="post">

13.<label>First Name</label>

14.<input class="tTip" type="text" name="f_name" placeholder="First Name"/>

15.<span>Please Enter your name here.Remember text only</span>

16.<span id="fnameInfo"></span>

17.<label>Last Name</label>

18.<input class="tTip" type="text" name="l_name" placeholder="Last Name"/>

19.<span>Please Enter your Last name here.Remember text only</span>

20.<span id="lnameInfo"></span>

21.<label>Email</label>

22.<input class="tTip" type="text" name="email" placeholder="Email"/>

23.<span>Please Enter your Email here.Remember valid only</span>

24.<span id="mailInfo"></span>

25.<label>Phone Number</label>

26.<input class="tTip" type="text" name="phone" placeholder="Phone"/>

27.<span>Please Enter your Phone number here.Remember numbers only</span>

28.<span id="phoneInfo"></span>

29.<input type="submit" value="Submit"/>

30.</form>

31.</div>

32.</body>

33.</html>

style.css ফাইল

01.body{

02.font-family:Verdana;

03.font-size:13px;

04.}

05.#form_container{

06.width:400px;

07.margin:0 auto;

08.overflow:hidden;

09.border:1px solid #ccc;

10.border-radius:5px;

11.padding:10px;

12.}

13.h2{

14.text-align:center;

15.}

16..error{

17.color:#f00;

18.}

19.#form_container span{

20.float:right;

21.display:block;

22.clear:both;

23.}

24.#form_container label{

25.display:block;

26.float:left;

27.margin:5px 0;

28.width:150px;

29.}

30.#form_container input{

31.float:right;

32.margin:5px 0;

33.}

34.#form_container input[type="submit"]{

35.float:left;

36.margin:8px 0 0 254px;

37.}

38.#form_container .tTip + span{

39.display:none;

40.}

41..toolTip {

42.display: none;

43.position: absolute;

44.border: 1px solid #333;

45.background-color: yellow;

46.padding: 2px 6px;

47.border-radius:4px;

48.}

script.js ফাইল

01.$(document).ready(function(){

02.$('.tTip').hover(function(event){

03.// mouse hover

04.var spanText = $(this).next().html();

  1.  

06.$('<p class="toolTip"></p>')

07..text(spanText)

08..appendTo('body')

09..css('top', (event.pageY - 40) + 'px')

10..css('left', (event.pageX + 20) + 'px')

11..fadeIn('slow');

12.}, function() {

13.$('.toolTip').remove();

14.}).mousemove(function(event){

15.// when mouse move

16.$('.toolTip')

17..css('top', (event.pageY - 40) + 'px')

18..css('left', (event.pageX + 20) + 'px');

19.});

20.});

ব্যাখ্যা: HTML ফাইলে দেখুন প্রতিটি ইনপুট ফিল্ডে tTip নামে একটি ক্লাস যোগ করেছি এবং এই ফিল্ডগুলিতে যখন মাউস হোভার হবে তখনি এর পরে যে span ট্যাগের ভিতর লেখা আছে সেগুলি spanText ভেরিয়েবলে জমা হবে (next(), html() method ব্যবহার করে)।

কোন selector এর পর [যেমন $('#test').next()] next() মেথড দিলে সিলেক্টেড এলিমেন্টের পরের child কে সে ধরে।

html() এবং text() মেথড প্রায় একই,html() দিয়ে যেকোন html code কোন সিলেক্টরে প্রবেশ করিয়ে দেয়া যায় আর text() দিয়ে কোন এলিমেন্টের ভিতর যে text থাকে সেটা ধরা যায়।

এরপর ৭ নম্বর লাইনে যে সিলেক্টর লেখা হয়েছে সেখানে text() মেথড ব্যবহার করে spanText এর text টুকু এখানে ঢুকিয়ে দেয়া হয়েছে এবং এরপর appendTo মেথড দিয়ে ডকুমেন্টের body ট্যাগের শেষে এই paragraph টি যোগ করা হয়েছে।তারপর css method ব্যবহার করে এই প্যরাগ্রাফে কিছু  inline css লিখে দিয়েছি।

এখানে গুরত্বপূর্ন একটা object event ব্যবহার করেছি যার properties হচ্ছে pageX এবং pageY.এর মাধ্যমে বর্তমান ইভেন্ট সাপেক্ষে (mouseover) X এবং Y অক্ষ পরিমাপ করা যায়।সুতরাং আমার প্রয়োজন অনুযায়ী আমি মাউস হোভারে Y অক্ষ থেকে মাইনাস ৪০ পিক্সেল (উপরে) এবং X অক্ষ থেকে প্লাস ২০ পিক্সেল (নিচে) নামিয়ে দিয়েছি। একই  css mouse যখন মুভ করবে তখন event সাপেক্ষে (mousemove ইভেন্ট) toolTip ক্লাস সম্বলিত text টি move করবে।