2 सवाल: क्या कोई HTML ऑब्जेक्ट को स्थानांतरित करने का एक तरीका है यदि ऑब्जेक्ट विंडो की सीमा के बहुत करीब है?

पर बनाया गया सवाल Wed, May 8, 2019 12:00 AM

संदर्भ: जब मैं टैग छवि पर होवर करता हूं, तो एक बॉक्स दिखाई देता है और यह कलाकृति का पता चलता है। मेरी समस्या यह है, अगर टैग खिड़की के बाईं या दाईं सीमा के बहुत करीब है, तो यह बॉक्स को काट देता है और हम अब infos को नहीं देख सकते हैं।

वास्तविक प्रश्न: क्या सीएसएस या जावास्क्रिप्ट में बॉक्स को दाईं ओर ले जाने का कोई तरीका है अगर यह स्क्रीन में फिट होने के लिए बहुत बड़ा है?

 https://imgur.com/a/tO5JnZq

छवि बॉक्स को काटती हुई दिखाती है क्योंकि यह खिड़की की बाईं सीमा के करीब है

    
1
  1. क्या आप टैग की जानकारी प्रदर्शित करने के लिए प्लगइन जैसे कुछ टूलटिप का उपयोग कर रहे हैं
    2019-05-08 16: 03: 48Z
  2. होवर इवेंट को निकाल दिए जाने पर कर्सर की स्थिति प्राप्त करें, यदि यह स्क्रीन के किनारे से दिखाई देने वाली div की चौड़ाई से कम है तो संशोधन करें यह स्थिति है (+ /) -) कर्सर स्थिति से
    2019-05-08 16: 06: 49Z
  3. @ MuhammadOmerAslam नहीं मैं किसी भी प्लगइन्स का उपयोग नहीं कर रहा हूं, लेकिन मुझे लगता है कि मुझे एक समाधान मिला, धन्यवाद!
    2019-05-08 17: 03: 54Z
    2 उत्तर                              2                         

    मैंने हाल ही में jquery में ऐसा कुछ किया, मूल रूप से आपको टूलटीप निकालते समय स्क्रीन की चौड़ाई और कर्सर स्क्रीन की स्थिति मिलती है, अगर यह फिट नहीं होगा, तो इसे तब तक ऊपर ले जाएं जब तक कि यह न हो जाए:

    $('.showtooltip').on('click touchend', function (e){
        const screenWidth = $(window).width() / 2;
        const x = e.pageX; //Cursor X position
        const y = e.pageY; //Cursor Y position
        const tooltipDirection = e.pageX < screenWidth ? 10 : -200;// if click is on the right of the screen show tooltip to the left of event(-200px)
        const content = "Here's a tooltip";
    
        if (content.length > 0)
        {
            //insert a span with your content or whatever here
            $('body').append("<div class='custom-tooltip' style='position:absolute;left:" + (x + tooltipDirection) + "px;top:" + y +"px;background-color:#ffa;border:1px solid #cc9;padding:3px;font-size:13px;-moz-box-shadow: 2px 2px 11px #666;-webkit-box-shadow: 2px 2px 11px #666;'>" + content + "</div>");
    
    
             setTimeout(function(){//remove the span after 3 seconds
                 $('.custom-tooltip').fadeOut(function(){
                     $(this).remove();
                 });
             },3000);
        }   
    });
    
        
    1
    2019-05-08 16: 15: 47Z
    1. अच्छा विचार धन्यवाद!
      2019-05-08 17: 04: 44Z

      इन-लाइन सीएसएस का उपयोग करें, या तो बाईं ओर अंतरिक्ष के लिए मार्जिन या पैडिंग:

      style="margin:10px" or "padding:10px"
      

      दाईं ओर मार्जिन या पैडिंग के लिए:

      style="position:absolute,right:10px,margin:10px" or "padding:10px"
      

      आशा है कि यह आपके उद्देश्य के लिए काम करेगा।

          
      - 2
      2019-05-08 16: 45: 33Z
स्रोत रखा गया यहाँ