Trying to generate dynamic cluetip
$(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 fnt1开发者_Python百科1 cffff99">2°, 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.
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>
精彩评论