আমি কীভাবে jQuery ব্যবহার করে হোভারে একটি সরঞ্জামদণ্ডের বার্তা প্রদর্শন করতে পারি?

Question 1

শিরোনাম অনুসারে, আমি কীভাবে jQuery ব্যবহার করে হোভারে একটি সরঞ্জামদণ্ডের বার্তা প্রদর্শন করতে পারি?

Question 2

Question 3

আপনার যা প্রয়োজন তার জন্য টুলটিপ প্লাগইন খুব বেশি ভারী ওজনযুক্ত হতে পারে। আপনার সরঞ্জামদণ্ডে আপনি যে পাঠ্যটি দেখাতে চান তা কেবল 'শিরোনাম' বৈশিষ্ট্যটি সেট করুন।

$("#yourElement").attr('title', 'This is the hover-over text');

Question 4

নিম্নলিখিতটি কবজের মতো কাজ করবে (ধরে নিবেন আপনার সাথে ডিভ / স্প্যান / টেবিল / টিআর / টিডি / ইত্যাদি রয়েছে "id"="myId")

    $("#myId").hover(function() {
        $(this).css('cursor','pointer').attr('title', 'This is a hover text.');
    }, function() {
        $(this).css('cursor','auto');
    });

সম্মানজনক হিসাবে, .css('cursor','pointer')হোভারের উপর মাউস পয়েন্টার পরিবর্তন করবে।

Question 5

jQuery টুলটিপ প্লাগইনটি একবার দেখুন । আপনি বিভিন্ন বিকল্পের জন্য একটি বিকল্প অবজেক্টে পাস করতে পারেন।

এছাড়াও অন্যান্য বিকল্প টুলটিপ প্লাগইন উপলব্ধ রয়েছে যার মধ্যে কয়েকটি রয়েছে

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

Question 6

আপনি বুটস্ট্র্যাপ টুলটিপ ব্যবহার করতে পারেন । এটি আরম্ভ করতে ভুলবেন না।

<span class="tooltip-r" data-toggle="tooltip" data-placement="left" title="Explanation">
inside span
</span>

বাম দিকে পাঠ্য বিবরণ প্রদর্শিত হবে।

এবং এটি জেএস দিয়ে চালান:

$('.tooltip-r').tooltip();

Question 7

প্রস্তাবিত কিউটিপ এবং অন্যান্য প্রকল্পগুলি বেশ পুরানো বলে আমি কিউটিপ 2 ব্যবহার করার পরামর্শ দিচ্ছি কারণ এটি সর্বাধিক আপ টু ডেট।

Question 8

টুলটিপসটারটি একবার দেখুন

ব্যবহার করা সহজ
নমনীয়
কিছু অন্যান্য টুলটিপ প্লাগিনের তুলনায় বেশ হালকা ওজন (39 কেবি)
অতিরিক্ত স্টাইলিং ছাড়াই আরও ভাল দেখাচ্ছে
পূর্বনির্ধারিত থিমগুলির একটি ভাল সেট রয়েছে

Question 9

আপনি কোনও জিকিউইরি ব্যবহার না করে কেবল সিএসএস ব্যবহার করে এটি করতে পারেন।

<a class="tooltips">
    Hover Me
    <span>My Tooltip Text</span>
</a>
<style>
    a.tooltips {
        position: relative;
        display: inline;
    }

        a.tooltips span {
            position: absolute;
            width: 200px;
            color: #FFFFFF;
            background: #000000;
            height: 30px;
            line-height: 30px;
            text-align: center;
            visibility: hidden;
            border-radius: 6px;
        }

            a.tooltips span:after {
                content: '';
                position: absolute;
                top: 100%;
                left: 35%;
                margin-left: -8px;
                width: 0;
                height: 0;
                border-top: 8px solid #000000;
                border-right: 8px solid transparent;
                border-left: 8px solid transparent;
            }

    a:hover.tooltips span {
        visibility: visible;
        opacity: 0.8;
        bottom: 30px;
        left: 50%;
        margin-left: -76px;
        z-index: 999;
    }
</style>