jquery - qtip2 reposition on target change -
i'm using qtip2 add qtip next selected radio button among set of grouped radio buttons. can display qtip correctly when page loads, when selected radio changes, i'd qtip follow along , point @ newly checked radio button. have jsfiddle here highlighting issue. how can qtip point newly checked radio button?
<html> <head> <link href="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.css" rel="stylesheet" /> <link href="mycss2.css" rel="stylesheet" /> <style> #demo-simple{ margin:100px; } input[type="radio"]{ margin:20px; } </style> </head> <body> <div id="demo-simple" class="box"> <div id="primary"> <div> <input type="radio" name="blah" checked /> radio1 </div> <div> <input type="radio" name="blah" /> radio2 </div> </div> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.js" ></script> <script type="text/javascript"> $(document).ready(function () { $("#primary input[type='radio']:checked").qtip({ content: { text: 'i selected' }, show: { ready: true, delay: 0 }, hide: false, position: { my: 'right center', at: 'left center', target: $("#primary input[type='radio']:checked") }, }); $("#primary input[type='radio']").change(function(evt){ console.log(evt); console.log('changed'); // manually reposition qtip?? }); }); </script> </body>
here can use code demo fiddle
following function need make
function updateqtip(){ $("#primary input[type='radio']").qtip('destroy'); $("#primary input[type='radio']:checked").qtip({ content: { text: 'i selected' }, show: { ready: true, delay: 0 }, hide: false, position: { my: 'right center', at: 'left center', target: $("#primary input[type='radio']:checked") }, }); } here how can use function
$(document).ready(function () { updateqtip(); $("#primary input[type='radio']").change(function(evt){ console.log(evt); console.log('changed'); updateqtip(); // manually reposition qtip?? }); });
Comments
Post a Comment