क्लिक पर टूलटिप डिस्प्ले बनाएं और इसे

Question

पर एक मॉडल जोड़ें, मुझे आश्चर्य है कि मुझे इस पहेली के लिए jquery के ऑनक्लिक ईवेंट हैंडलर को बांधना मुश्किल लगता है। मुझे यह भी नहीं पता कि मैं क्या गलत कर रहा हूं। इस तरह से

<ul> 
    <li><a id="tooltip_1" href="#" class="tooltip" >Trigger1</a><li> 
    <li><a id="tooltip_2" href="#" class="tooltip" >Trigger2</a><li> 
    <li><a id="tooltip_3" href="#" class="tooltip" >Trigger3</a><li> 
</ul> 

<div style="display: none;"> 
    <div id="data_tooltip_1"> 
     data_tooltip_1: You can hover over and interacte with me 
    </div> 
    <div id="data_tooltip_2"> 
     data_tooltip_2: You can hover over and interacte with me 
    </div> 
    <div id="data_tooltip_3"> 
     data_tooltip_3: You can hover over and interacte with me 
    </div> 
</div>​ 

स्टाइल: - -:

li { 
    padding: 20px 0px 0px 20px; 
}​ 

इस तरह एक jQuery के साथ

: - एचटीएमएल इस प्रकार है

$(document).ready(function() { 
    $('.tooltip[id^="tooltip_"]').each 

     (function(){ 
     $(this).qtip({ 
      content: $('#data_' + $(this).attr('id')), 
       show: { 
      }, 
      hide: { 
       fixed: true, 
       delay: 180 
      } 
     }); 
    }); 
});​ 

आप मेरे द्वारा बनाए गए बेला पेज की जाँच: - http://jsfiddle.net/UyZnb/339/.

फिर से, मैं एक jquery मोडल जैसी उपस्थिति को कैसे कार्यान्वित कर सकता हूं ताकि टूलटिप फोकस हो जाए?

Answer 1

कार्य डेमो: http://jsfiddle.net/swxzp/याhttp://jsfiddle.net/rjGeS/ क्लिक का उपयोग कर (मैं एक छोटे से JQuery/CSS/अस्पष्टता डेमो लिखा है)

अपडेट:: ट्रिगर 1, 2 के साथ कार्य करना नमूना पर और बाहर माउस का उपयोग & 3: http://jsfiddle.net/HeJqg/

कैसे काम करता है:

यह 2 divs अर्थात background w जिसका उपयोग बाकी पेज को ग्रेल-आश जैसे मोडल और दूसरा div large बनने के लिए किया जाता है जो टूलटिप के लिए प्लेसहोल्डर के रूप में कार्य करेगा ताकि आप इसे किसी भी घटना में बंद कर सकें और खोल सकें, भले ही पृष्ठभूमि ग्रे हो।

रेस्ट कोड के साथ चारों ओर खेलने के लिए स्वतंत्र लग रहा है, आशा है कि यह कारण :)

कोड

$('.tooltip_display').click(function() { 
    var $this = $(this); 
    $("#background").css({ 
     "opacity": "0.3" 
    }).fadeIn("slow"); 


    $("#large").html(function() { 
     $('.ttip').css({ 
      left: $this.position() + '20px', 
      top: $this.position() + '50px' 
     }).show(500) 

    }).fadeIn("slow"); 


}); 

$('.note').on('click', function() { 
    $('.ttip').hide(500); 
    $("#background").fadeOut("slow"); 
    $("#large").fadeOut("slow"); 

}); 
$("#large").click(function() { 
    $(this).fadeOut(); 

});​ 

सीएसएस

.ttip { 
    position: absolute; 
    width: 350px; 
    height: 100px; 
    color: #fff; 
    padding: 20px; 
    -webkit-box-shadow: 0 1px 2px #303030; 
    -moz-box-shadow: 0 1px 2px #303030; 
    box-shadow: 0 1px 2px #303030; 
    border-radius: 8px 8px 8px 8px; 
    -moz-border-radius: 8px 8px 8px 8px; 
    -webkit-border-radius: 8px 8px 8px 8px; 
    -o-border-radius: 8px 8px 8px 8px; 
    background-image:-moz-linear-gradient(top, #F45000, #FF8000); 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F45000), to(#FF8000)); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F45000', endColorstr='#FF8000', GradientType=0); 
    background-color:#000; 
    display: none 
} 
.contents { 
    font-size: 15px; 
    font-weight:bold 
} 
.note { 
    font-size: 13px; 
    text-align:center; 
    display:block; 
    width: 100% 
} 
#background{ 
    display: none; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    background: #000000; 
    z-index: 1; 
} 
#large { 
    display: none; 
    position: absolute; 
    background: #FFFFFF; 
    padding: 0px; 
    z-index: 10; 
    min-height: 0px; 
    min-width: 0px; 
    color: #336699; 
}​ 

एचटीएमएल

में मदद करता है

<span class="tooltip_display">Trigger</span> 
<div id="large"> 
<div class="ttip"> 
    <div class="contents">Here goes contents...</div> 
    <span class="note">(click here to close the box)</span> 
</div> 
</div> 
<div id="background"></div>​ 

काम कर डेमो की छवि: