試圖生成動態提示

Question

$(document).ready(function() { 

     var user_id = document.getElementById('sessuid').value; 
     //alert(user_id); 
     //$('a.jtebizcard').attr('rel','<?php echo base_url();?>gl_profile/gl_getbig').cluetip({ 
     $('a.jtebizcard').cluetip({ 
     //alert(user_id);  
       local: true, 
       width:'353px', 
       dropShadow: false, 
       sticky: true, 
       mouseOutClose: true, 
       leftOffset:0, 
       topOffset:0, 
       positionBy: 'bottomTop', 
       ajaxSettings: { 
         type: "POST", 
         data: "user_id=" + user_id 
        }, 
       ajaxProcess : function(data){ 
         alert(data); 
        } 
//     $.ajax({ 
//         url: "<?php //echo SITEURL;?>/gl_profile/gl_getbig", 
//         type: 'POST', 
//         data: "user_id="+user_id, 
//         success: function(data) { 
//          alert(data); 
//         } 
//        }); 
       }); 

這是將被激活的工具提示。

<div id="tool_tip_ebizcard" style="display:none;" class="localvisible"><!--id="tool_tip_ebizcard" class="localvisible"--> 
      <div class="ebiz_blue_tooltip_pointer"> 
       <div class="ebiz_blue_tooltip_pointer_inside"> 
        <!--Upper Section--> 
        <div class="cl" style="background-image:url(<?php echo base_url(); ?>images/tool_blue_bg.jpg);width:345px;height:95px;"> 

         <div class="cl pl10"> 
         <div class="fr pr3 pt2"> 
         <img src="<?php echo base_url(); ?>images/status_point.png" alt="status" /> 
         </div> 
         <!--Logo--> 
         <div class="cl"> 
         <div class="fl"> 
         <img src="<?php echo base_url(); ?>images/tool_tip_sym.png" alt="tooltip_sym" /> 
         </div> 
         <!--Logo--> 
         <!--Rani Advisor--> 
         <div class="fl pl10 pt5 width270"> 
         <div class=""> 
         <div class="fl width190 width180_ie7"> 
         <div class="fl"> 
         <div class="arial bold fnt12 cfff"><span class="cffff99 uppercase">LAXMAN</span>, Advisor</div> 
         </div> 
         </div> 
         <div class="fr pr15 width66_ie"> 
         <div class="arial fnt11 cffff99">2&deg;, 203 Links</div> 
         </div> 
         </div> 
         <div class="cl pt2"> 
         <div class="arial fnt11 cfff">Lucas Printer, India</div> 
         </div> 
         <div class="cl pt2"> 
         <div class="arial fnt11 cfff">Lorem ipsum dolor sit amet, consectetur Vestibulum suscipit, sapien eleifend dictum ultricies, felis nisi...</div> 
         </div> 
         </div> 
         <!--Rani Advisor--> 
         </div> 
         </div> 


        </div> 
        <!--Upper Section--> 
       </div> 

        <!--Lower Section--> 
        <div class="cl ml2"> 
        <div class="fl"> 
         <div class="tool_tip_btn width85"> 
          <div class="fl pl5 pt2"><img src="<?php echo base_url(); ?>images/plus_blue.png" /></div> 
          <div class="arial fnt10 c58595b uppercase center pt2 fl pl9">SHARE</div> 
         </div> 
        </div> 
        <div class="fl"> 
         <div class="tool_tip_btn width85"> 
          <div class="fl pl5 pt2"><img src="<?php echo base_url(); ?>images/msg_logo.png" /></div> 
          <div class="arial fnt10 c58595b uppercase center pt2 fl pl5">MESSAGE</div> 
         </div> 
        </div> 
        <div class="fl"> 
         <div class="tool_tip_btn width85"> 
          <div class="fl pl5 pt2"><img src="<?php echo base_url(); ?>images/chat_symbol.png" /></div> 
          <div class="arial fnt10 c58595b uppercase center pt2 fl pl9">Chat</div> 
         </div> 
        </div> 
        <div class="fl"> 
         <div class="tool_tip_btn width85"> 
          <div class="fl pl15 pt2"><img src="<?php echo base_url(); ?>images/more_sym.png" /></div> 
          <div class="arial fnt10 c58595b uppercase pt2 fl pl9 center">MORE</div> 
         </div> 
        </div> 
        </div> 
        <!--Lower Section--> 


      </div> 
      </div> 

當鼠標懸停發生在這一部分，我想發user_ID的，找回了自己的數據，並在顯示工具提示顯示出來。我嘗試了一些線索。它不工作。提前致謝。

Answer 1

我使用不同的工具提示，在這裏這已經很好，我已經使用qtip是代碼

$(document).ready(function() 
    { 
     // Use the each() method to gain access to each elements attributes 
     $('#content a[rel]').each(function() 
     { 
      $(this).qtip(
      { 
      content: { 
       // Set the text to an image HTML string with the correct src URL to the loading image you want to use 
       text: '<img class="throbber" src="<?php echo base_url();?>img/loading.gif" alt="Loading..." />', 
       url: $(this).attr('rel'), // Use the rel attribute of each element for the url to load 
       title: { 
        text: 'Biz Card', // Give the tooltip a title using each elements text 
        button: 'Close' // Show a close link in the title 
       } 
      }, 
      position: { 
       corner: { 
        target: 'bottomMiddle', // Position the tooltip above the link 
        tooltip: 'topMiddle' 
       }, 
       adjust: { 
        screen: true // Keep the tooltip on-screen at all times 
       } 
      }, 
      show: { 
       when: 'mouseover', 
       solo: true // Only show one tooltip at a time 
      }, 
      hide: 'unfocus', 
      style: { 
       tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner 
       border: { 
        width: 0, 
        radius: 2 
       }, 
       name: 'light', // Use the default light style 
       width: 380 // Set the tooltip width 
      } 
      }) 
     }); 
    }); 

這是你想要的提示會是這樣

<div id="content"> 
    <?php foreach($attending_user as $attend){ ?> 
    <div class="arial bold fnt14 c006ede fl jt_name pl20"> 
<a href="javascript:void(0);" 
<!--rel is used for the path you specify where your dynamic tooltip be generated--> 
<!--Here in this case i have specified controllers name where i am loading a view based on id--> 
rel="<?php echo SITEURL; ?>events/gl_event/get_biz/<?php echo $attend['user_id'];?>"> 
<?php echo character_limiter($attend['username'],5);?> 
</a> 
</div> 
    <?php } ?> 
</div> 

它的作用和地位