विंडो किनारे के संबंध में पॉपओवर की X स्थिति के आधार पर बूटस्ट्रैप पॉपओवर की स्थिति बदलना?

Question 1

मैंने इंटरनेट को दूर-दूर तक बिखेर दिया है और जब मैंने इस स्टैकओवरफ्लो पोस्ट को व्यावहारिक पाया तो क्या स्क्रीन की चौड़ाई के आधार पर बूटस्ट्रैप पॉपओवर की स्थिति को बदलना संभव है? , यह अभी भी मेरे सवाल का जवाब नहीं दिया, मेरी परेशानी समझ स्थिति / ऑफसेट के कारण होने की संभावना है।

यहाँ मैं करने की कोशिश कर रहा हूँ। मैं चाहता हूं कि Twitter बूटस्टैप पॉपओवर की स्थिति सही हो जब तक हॉटस्पॉट पॉपओवर व्यूपोर्ट से परे स्थित नहीं होगा, तब मैं चाहता हूं कि इसे LEFT तैनात किया जाए। मैं एक आईपैड वेब ऐप बना रहा हूं जिसमें हॉट स्पॉट हैं, जब आप एक हॉटस्पॉट पर धक्का देते हैं, तो जानकारी दिखाई देती है लेकिन मैं नहीं चाहता कि यह व्यूपोर्ट के बाहर दिखाई दे जब क्षैतिज स्क्रॉल लॉक हो।

मैं सोच रहा हूँ कि यह कुछ इस तरह होगा:

$('.infopoint').popover({
        trigger:'hover',
        animation: false,
        placement: wheretoplace 
    });
    function wheretoplace(){
        var myLeft = $(this).offset.left;

        if (myLeft<500) return 'left';
        return 'right';
    }

विचार? धन्यवाद!

Question 2

मैंने अभी देखा कि प्लेसमेंट विकल्प या तो एक स्ट्रिंग हो सकता है या एक स्ट्रिंग लौटाने वाला एक फ़ंक्शन है जो हर बार जब आप पॉप -ओवर-सक्षम लिंक पर क्लिक करते हैं तो गणना करता है।

यह प्रारंभिक $ .each फ़ंक्शन के बिना आपके द्वारा किए गए कार्यों को दोहराने में आसान बनाता है :

var options = {
    placement: function (context, source) {
        var position = $(source).position();

        if (position.left > 515) {
            return "left";
        }

        if (position.left < 515) {
            return "right";
        }

        if (position.top < 110){
            return "bottom";
        }

        return "top";
    }
    , trigger: "click"
};
$(".infopoint").popover(options);

Question 3

बूटस्ट्रैप 3 के लिए, वहाँ है

placement: 'auto right'

जो आसान है। डिफ़ॉल्ट रूप से, यह सही होगा, लेकिन यदि तत्व स्क्रीन के दाईं ओर स्थित है, तो पॉपओवर छोड़ा जाएगा। तो यह होना चाहिए:

$('.infopoint').popover({
   trigger:'hover',
   animation: false,
   placement: 'auto right'
});

Question 4

प्रलेखन के आधार पर आपको autoपसंदीदा प्लेसमेंट के साथ संयोजन में उपयोग करने में सक्षम होना चाहिए जैसेauto left

http://getbootstrap.com/javascript/#popovers : "जब" ऑटो "निर्दिष्ट किया जाता है, तो यह गतिशील रूप से पॉपओवर को पुन: प्राप्त करेगा। उदाहरण के लिए, यदि प्लेसमेंट" ऑटो बाएं "है, तो टूलटिप संभव के रूप में बाईं ओर प्रदर्शित होगा, अन्यथा। यह सही प्रदर्शित करेगा। ”

मैं एक ही काम करने की कोशिश कर रहा था और फिर महसूस किया कि यह कार्यक्षमता पहले से मौजूद है।

Question 5

इसलिए मैंने इसे प्रभावी ढंग से करने का एक तरीका निकाला। अपनी विशेष परियोजना के लिए मैं एक iPad वेबसाइट बना रहा हूं, इसलिए मुझे ठीक से पता था कि स्क्रीन के किनारे तक पहुंचने के लिए पिक्सेल X / Y मान क्या होगा। आपका यह x और यहY मान अलग-अलग होंगे।

चूँकि वैसे भी इनलाइन स्टाइल के द्वारा पॉपओवर लगाए जा रहे हैं, मैं बस यह तय करने के लिए प्रत्येक लिंक के लिए बाएं और शीर्ष मान को पकड़ता हूं कि पॉपओवर किस दिशा में होना चाहिए। यह html5 डेटा- मानों को जोड़कर किया जाता है जो .popover () निष्पादन पर उपयोग करता है।

if ($('.infopoint').length>0){
    $('.infopoint').each(function(){
        var thisX = $(this).css('left').replace('px','');
        var thisY = $(this).css('top').replace('px','');
        if (thisX > 515)
            $(this).attr('data-placement','left');
        if (thisX < 515)
            $(this).attr('data-placement','right');
        if (thisY > 480)
            $(this).attr('data-placement','top');
        if (thisY < 110)
            $(this).attr('data-placement','bottom');
    });
    $('.infopoint').popover({
        trigger:'hover',
        animation: false,
        html: true
    });
}

किसी भी टिप्पणी / सुधार का स्वागत है, लेकिन यदि आप मैन्युअल रूप से मान डालने के इच्छुक हैं तो यह काम पूरा हो जाता है।

Question 6

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

var options = {
  placement: function (context, source) {
    var $win, $source, winWidth, popoverWidth, popoverHeight, offset, toRight, toLeft, placement, scrollTop;

    $win = $(window);
    $source = $(source);
    placement = $source.attr('data-placement');
    popoverWidth = 400;
    popoverHeight = 110;
    offset = $source.offset();

    // Check for horizontal positioning and try to use it.
    if (placement.match(/^right|left$/)) {
      winWidth = $win.width();
      toRight = winWidth - offset.left - source.offsetWidth;
      toLeft = offset.left;

      if (placement === 'left') {
        if (toLeft > popoverWidth) {
          return 'left';
        }
        else if (toRight > popoverWidth) {
          return 'right';
        }
      }
      else {
        if (toRight > popoverWidth) {
          return 'right';
        }
        else if (toLeft > popoverWidth) {
          return 'left';
        }
      }
    }

    // Handle vertical positioning.
    scrollTop = $win.scrollTop();
    if (placement === 'bottom') {
      if (($win.height() + scrollTop) - (offset.top + source.offsetHeight) > popoverHeight) {
        return 'bottom';
      }
      return 'top';
    }
    else {
      if (offset.top - scrollTop > popoverHeight) {
        return 'top';
      }
      return 'bottom';
    }
  },
  trigger: 'click'
};
$('.infopoint').popover(options);

Question 7

आप इसे भी आजमा सकते हैं,

==> व्यूपोर्ट में लक्ष्य / स्रोत की स्थिति प्राप्त करें
==> देखें कि क्या नीचे से स्थान कम है कि आपकी टूलटिप ऊँचाई
==> यदि नीचे से स्थान कम है कि आपका टूलटिप ऊँचाई पर है, तो बस पृष्ठ स्क्रॉल करें

placement: function(context, source){
  //get target/source position in viewport
  var bounds = $(source)[0].getBoundingClientRect();
      winHeight = $(window).height();

  //check wheather space from bottom is less that your tooltip height
  var rBottom = winHeight - bounds.bottom;

  //Consider 180 == your Tooltip height
  //if space from bottom is less that your tooltip height, this will scrolls page up
  //We are keeping tooltip position is fixed(at bottom)

  if (rBottom < 180){
    $('html, body').animate({ scrollTop: $(document).scrollTop()+180 }, 'slow');
  }

  return "bottom";
}

Question 8

आप डेटा-प्लेसमेंट = "ऑटो बाएं" जैसे डेटा प्लेसमेंट में ऑटो का उपयोग कर सकते हैं। यह आपके स्क्रीन साइज के अनुसार ऑटोमैटिक एडजस्ट हो जाएगा और डिफॉल्ट प्लेसमेंट बचेगा।

Question 9

Bchhun के महान जवाब के अलावा, यदि आप फोलेटिंग पोजिशनिंग चाहते हैं, तो आप ऐसा कर सकते हैं

var options = {
    placement: function (context, source) {
         setTimeout(function () {
               $(context).css('top',(source.getBoundingClientRect().top+ 500) + 'px')
         },0)
         return "top";
    },
    trigger: "click"
};
$(".infopoint").popover(options);

Question 10

मैंने अपनी समस्या AngularJS में इस प्रकार हल की है:

var configPopOver = {
        animation: 500,
        container: 'body',
        placement: function (context, source) {
                    var elBounding = source.getBoundingClientRect();
                    var pageWidth = angular.element('body')[0].clientWidth
                    var pageHeith = angular.element('body')[0].clientHeith

                    if (elBounding.left > (pageWidth*0.34) && elBounding.width < (pageWidth*0.67)) {
                        return "left";
                    }

                    if (elBounding.left < (pageWidth*0.34) && elBounding.width < (pageWidth*0.67)) {
                        return "right";
                    }

                    if (elBounding.top < 110){
                        return "bottom";
                    }

                    return "top";
                },
        html: true
    };

यह कार्य तत्व स्थिति के आधार पर बूटस्ट्रैप पॉपओवर की स्थिति को सबसे अच्छी स्थिति में तैरता है।

Question 11

$scope.popoverPostion = function(event){
    $scope.pos = '';

       if(event.x <= 207 && event.x >= 140){
           $scope.pos = 'top';
           event.x = '';
       }
       else if(event.x < 140){
           $scope.pos = 'top-left';
           event.x = '';
       }
       else if(event.x > 207){
           $scope.pos = 'top-right';
           event.x = '';
       }

};

Question 12

यदि पेज में लगभग सभी जगहों पर यू की जरूरत है, तो आप इसे भी आजमा सकते हैं।

U इसे सामान्य तरीके से कॉन्फ़िगर कर सकता है और फिर इसका उपयोग कर सकता है।

इस तरह से आप HTML एलिमेंट और कुछ भी यू का उपयोग कर सकते हैं :)

$(document).ready(function()
                  {
  var options =
      {
        placement: function (context, source)
        {
          var position = $(source).position();
          var content_width = 515;  //Can be found from a JS function for more dynamic output
          var content_height = 110;  //Can be found from a JS function for more dynamic output

          if (position.left > content_width)
          {
            return "left";
          }

          if (position.left < content_width)
          {
            return "right";
          }

          if (position.top < content_height)
          {
            return "bottom";
          }

          return "top";
        }
        , trigger: "hover"
        , animation: "true"
        , html:"true"
      };
  $('[data-toggle="popover"]').popover(options);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="container">
	<h3>Popover Example</h3>
	<a id="try_ppover" href="#" data-toggle="popover" title="Popover HTML Header" data-content="<div class='jumbotron'>Some HTML content inside the popover</div>">Toggle popover</a>
</div>

स्निपेट का विस्तार करें

इसके अलावा

अधिक विकल्प सेट करने के लिए, आप यहां जा सकते हैं ।

और भी यहाँ पाया जा सकता है ।

अपडेट करें

अगर आप क्लिक के बाद पॉपअप चाहते हैं, तो यू जेएस विकल्प को trigger: "click"इस तरह बदल सकता है-

        return ..;
    }
    ......
    , trigger: "click"
    ......
};

यू भी इसे HTML एडिंग data-trigger="click"में इस तरह से कस्टमाइज़ कर सकते हैं-

<a id="try_ppover" href="#" data-toggle="popover" data-trigger="click" title="Popover Header" data-content="<div class='jumbotron'>Some content inside the popover</div>">Toggle popover</a>

मुझे लगता है कि यह अधिक उन्मुख कोड होगा और सभी के लिए अधिक उपयोगी और अधिक उपयोगी होगा :)।