क्लिक के बजाय होवर पर बूटस्ट्रैप पॉपओवर अपीयर / डिस्पैयर करें

181

मैं बूटस्ट्रैप के पॉपओवर के साथ एक वेबसाइट बना रहा हूं और मैं यह पता नहीं लगा सकता कि पॉपओवर को क्लिक के बजाय होवर पर कैसे प्रदर्शित किया जाए।

जब मैं चाहता हूं कि एक पॉपओवर दिखाई दे, जब कोई व्यक्ति उस पर क्लिक करने के बजाय एक लिंक पर होवर करे और जब वह दूर जाए तो पॉपओवर गायब हो जाए। दस्तावेज़ीकरण कहता है कि या तो डेटा विशेषता या jquery का उपयोग करना संभव है। मैं बहुत अधिक बल्कि jquery के साथ करूँगा क्योंकि मेरे पास कई पॉपओवर हैं।

javascript jquery twitter-bootstrap

— Muhambi
स्रोत

20

सुझाव: होवर स्पर्श उपकरणों पर बेकार है। यदि आप टचस्क्रीन के लिए प्रयोज्यता सुनिश्चित करना चाहते हैं, तो कार्यक्षमता को हॉवर से न बांधें।

— जोर्जेन आर सेप

374

इसके बजाय triggerपॉपओवर का विकल्प सेट करें , जो कि डिफ़ॉल्ट है।hoverclick

यह data-*मार्कअप में या तो विशेषताओं का उपयोग करके किया जा सकता है :

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

या आरंभीकरण विकल्प के साथ:

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

यहाँ एक डेमो है ।

— जोओ सिल्वा
स्रोत

उत्तर के लिए धन्यवाद। मैं इस कोड में ट्रिगर विकल्प कैसे सेट करूं? <script> $(function () { $("#popover").popover(); }); </script>

— मुहम्बी

8

@ जेक: उपयोग करें $("#popover").popover({ trigger: "hover" });।

— जोओ सिल्वा

धन्यवाद! किसी कारण से मुझे डेटा-ट्रिगर और जेएस आरंभीकरण दोनों को लागू करने की आवश्यकता थी।

— एंथनी

क्या कोई मुझे यह समझने में मदद कर सकता है कि बेहतर विकल्प, जेएस आरंभीकरण या डेटा-विशेषताएँ क्या है? यदि मैं डेटा-विशेषताओं का उपयोग करता हूं, तब भी मुझे $ ("# पॉपओवर") कॉल करना होगा। पॉपओवर (); मेरे जावास्क्रिप्ट से

— बेली

@ बेली यह इस पर निर्भर करेगा कि आपके कोडिंग नियम क्या हैं और यदि आप किसी विशेष कोडिंग मानकों के साथ काम कर रहे हैं, और फिर व्यक्तिगत प्राथमिकता। दोनों को देखते हुए, मैं पॉपओवर () फ़ंक्शन के भीतर ट्रिगर विकल्प को लक्षित करना पसंद करता हूं। मेरे लिए अधिक पठनीय लगता है।

— कोडरही

33

मैं इसे एक्सेसिबिलिटी के लिए जोड़ना चाहूंगा, मुझे लगता है कि आपको फोकस ट्रिगर जोड़ना चाहिए:

अर्थात $("#popover").popover({ trigger: "hover focus" });

— Calexo
स्रोत

इस अनुरोध के लिए क्लिक न करें- पोस्ट के इस शीर्षक को देखें

— अल्बुकर्क वेब डिज़ाइन

14

यदि आप खुद ही पॉपओवर को हॉवर करना चाहते हैं तो आपको मैन्युअल ट्रिगर का उपयोग करना होगा।

मैंने ये ढूंढ निकाला:

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);
    });
}

— जोहान्स फ़र्नेर
स्रोत

6

आपके द्वारा वर्णित कार्यक्षमता, बूटस्ट्रैप टूलटिप का उपयोग करके आसानी से प्राप्त की जा सकती है।

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

फिर तत्व के लिए टूलटिप () फ़ंक्शन को कॉल करें।

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

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

— VforVitamin
स्रोत

1

इनमें से कुछ जवाबों की कोशिश करने और खोजने के बाद वे कई लिंक के साथ अच्छी तरह से पैमाने पर नहीं होते हैं (उदाहरण के लिए स्वीकार किए गए उत्तर के लिए आपके पास हर लिंक के लिए jquery की एक पंक्ति की आवश्यकता होती है), मुझे एक तरह से काम करने के लिए न्यूनतम कोड की आवश्यकता होती है, और यह पूरी तरह से काम करने के लिए भी प्रतीत होता है, कम से कम क्रोम पर।

आप इसे सक्रिय करने के लिए इस पंक्ति को जोड़ते हैं:

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

और आपके एंकर लिंक के लिए ये सेटिंग्स:

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

इसे यहां कार्रवाई में देखें , मैं स्वीकार किए गए उत्तर के समान आयात का उपयोग कर रहा हूं, इसलिए इसे पुरानी परियोजनाओं पर ठीक काम करना चाहिए।

— पीटर
स्रोत