ক্লিকের পরিবর্তে হোভারে বুটস্ট্র্যাপ পপওভার প্রদর্শিত / অদৃশ্য হয়ে নিন

Question

আমি বুটস্ট্র্যাপের পপওভার দিয়ে একটি ওয়েবসাইট তৈরি করছি এবং ক্লিকের পরিবর্তে কীভাবে পপওভারটিকে হোভারে প্রদর্শিত হবে তা আমি বুঝতে পারি না।

আমি যা করতে চাই তা হ'ল যখন কোনও লিঙ্কে ক্লিক করার পরিবর্তে কেউ ওপরে ওঠে এবং পপওভারটি যখন সরে যায় তখন অদৃশ্য হয়ে যায় appear ডকুমেন্টেশন বলে যে এটি ডেটা অ্যাট্রিবিউট বা জেকুরি ব্যবহার করেই সম্ভব possible আমি একাধিক পপওভার হওয়ায় আমি এটি বরং জ্যাকোয়ারি দিয়ে করব।

Comments

টিপ: হোভার টাচ ডিভাইসে সফল হয় ks আপনি যদি টাচস্ক্রিনের ব্যবহারযোগ্যতা নিশ্চিত করতে চান, তবে হোভার করার কার্যকারিতা আবদ্ধ করবেন না।

— জর্জেন আর

Answer 1

এর পরিবর্তে triggerপপওভারের বিকল্পটি সেট করুন , এটি পূর্বনির্ধারিত ।hoverclick

এটি data-*মার্কআপে কোনও বৈশিষ্ট্য ব্যবহার করে করা যেতে পারে :

<a id="popover" data-trigger="hover">Popover</a>

বা একটি সূচনা বিকল্প সহ:

$("#popover").popover({ trigger: "hover" });

এখানে একটি ডেমো ।

Comments

উত্তরের জন্য ধন্যবাদ. আমি কীভাবে এই কোডটিতে একটি ট্রিগার বিকল্প সেট করব? <script> $(function () { $("#popover").popover(); }); </script>

— মুহাম্বি

@ জ্যাক: ব্যবহার করুন $("#popover").popover({ trigger: "hover" });।

— জোও সিলভা

ধন্যবাদ! কোনও কারণে আমাকে ডেটা ট্রিগার এবং জেএস সূচনা উভয়ই প্রয়োগ করতে হয়েছিল।

— অ্যান্টনি

কেউ কী আমাকে বুঝতে আরও ভাল বিকল্প, জেএস সূচনা বা ডেটা-অ্যাট্রিবিউট বুঝতে সাহায্য করতে পারে? এমনকি যদি আমি ডেটা-গুণাবলী ব্যবহার করি, তবুও আমাকে I ("# পপওভার") কল করতে হবে pop পপওভার (); আমার জাভাস্ক্রিপ্ট থেকে।

— বেইলি

@ বেইলি আপনার কোডিংয়ের বিধিগুলি কী এবং যদি আপনি কোনও নির্দিষ্ট কোডিং মান এবং তারপরে ব্যক্তিগত পছন্দ নিয়ে কাজ করছেন তবে এটি নির্ভর করবে। দু'জনের দিকে তাকিয়ে আমি পপওভার () ফাংশনের মধ্যে ট্রিগার বিকল্পটি লক্ষ্য করে পছন্দ করি। আমার কাছে আরও পাঠযোগ্য বলে মনে হচ্ছে।

— কোডেরি

Answer 2

অ্যাক্সেসযোগ্যতার জন্য আমি এটি যুক্ত করতে চাই, আমি মনে করি আপনার ফোকাস ট্রিগার যুক্ত করা উচিত:

অর্থাত $("#popover").popover({ trigger: "hover focus" });

Comments

এই অনুরোধটির জন্য ক্লিক করুন

— আলবুকার্ক ওয়েব ডিজাইন

Answer 3

আপনি যদি পপওভার নিজেই হোভার করতে চান তবে আপনাকে একটি ম্যানুয়াল ট্রিগার ব্যবহার করতে হবে।

এটাই আমি নিয়ে এসেছি:

function enableThumbPopover() {
    var counter;

    $('.thumbcontainer').popover({
        trigger: 'manual',
        animation: false,
        html: true,
        title: function () {
            return $(this).parent().find('.thumbPopover > .title').html();
        },
        content: function () {
            return $(this).parent().find('.thumbPopover > .body').html();
        },
        container: 'body',
        placement: 'auto'
    }).on("mouseenter",function () {
        var _this = this; // thumbcontainer

        console.log('thumbcontainer mouseenter')
        // clear the counter
        clearTimeout(counter);
        // Close all other Popovers
        $('.thumbcontainer').not(_this).popover('hide');

        // start new timeout to show popover
        counter = setTimeout(function(){
            if($(_this).is(':hover'))
            {
                $(_this).popover("show");
            }
            $(".popover").on("mouseleave", function () {
                $('.thumbcontainer').popover('hide');
            });
        }, 400);

    }).on("mouseleave", function () {
        var _this = this;

        setTimeout(function () {
            if (!$(".popover:hover").length) {
                if(!$(_this).is(':hover')) // change $(this) to $(_this) 
                {
                    $(_this).popover('hide');
                }
            }
        }, 200);
    });
}

Answer 4

আপনার বর্ণিত কার্যকারিতাটি বুটস্ট্র্যাপ টুলটিপ ব্যবহার করে সহজেই অর্জন করা যায়।

<button id="example1" data-toggle="tooltip">Tooltip on left</button>

তারপরে উপাদানটির জন্য টুলটিপ () ফাংশনটি কল করুন।

$('#example1').tooltip();

http://getbootstrap.com/javascript/#tooltips

Answer 5

এই উত্তরগুলির কয়েকটি চেষ্টা করার পরে এবং তারা একাধিক লিঙ্কগুলির সাথে ভাল স্কেল করে না তা খুঁজে পাওয়ার পরে (উদাহরণস্বরূপ স্বীকৃত উত্তরের জন্য আপনার প্রতিটি লিঙ্কের জন্য জিকোরির একটি লাইন প্রয়োজন) কাজ করার জন্য আমি ন্যূনতম কোড প্রয়োজন, এবং এটি কমপক্ষে ক্রোমেও নিখুঁতভাবে কাজ করে বলে মনে হচ্ছে।

এটি সক্রিয় করার জন্য আপনি এই লাইনটি যুক্ত করুন:

$('[data-toggle="popover"]').popover();

এবং আপনার অ্যাঙ্কর লিঙ্কগুলিতে এই সেটিংস:

data-toggle="popover" data-trigger="hover"

এটি এখানে কর্মে দেখুন , আমি স্বীকৃত উত্তরের মতো একই আমদানি ব্যবহার করছি যাতে এটি পুরানো প্রকল্পগুলিতে সূক্ষ্মভাবে কাজ করা উচিত।