尝试生成动态提示

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);
//                                  }
//                              });
                });

This is the tooltip that will be activated.

<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>

When the mouseover happens on this part, I want to send the User_id, retrieve his data and display it in the tooltip that is displayed. I tried the ajaxsetting in cluetip. It's not working. Thanks in advance.

Answer 1

I used a different tooltip and this has been great i have used qtip here is code

$(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
             }
          })
       });
    });

this is the function for it and position where you want the tooltip will be like this

<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>