CSS applied to create a content in tooltip
.cl_root {
width: 100%;
font-size: 13px;
overflow: hidden;
}
.cl_root .cl_table {
background-color: #FFF;
width: 100%;
margin-bottom: 8px;
max-width: 100%;
}
.cl_table .cl-key {
vertical-align: top;
text-align: left;
white-space: nowrap;
font-weight: normal;
padding: .4em 1em .4em 0;
font-weight:bold;
}
.cl_table .cl-value{
width: 95%;
padding: .4em 0;
text-align:left;
}
.textbox-fill-input {
width:95%;
padding:2px;
border-width:1px;
border-color:#666 #ccc #ccc #666
}
.cl-example {
FONT-SIZE: 12px; PADDING-TOP: 2px;
font-style:italic
}
.lk {
WHITE-SPACE: nowrap; COLOR: #112abb; CURSOR: pointer; TEXT-DECORATION: underline;
float: left;padding-top: 6px;padding-left: 10px;
}
.bubble-table {
width: 100%; table-layout: fixed;margin-top: 17px;margin-bottom: 4px;
}
.bubble-cell-side {
WIDTH: 25px;
}
.bubble-mid {
PADDING-BOTTOM: 0px; PADDING-LEFT: 20px; PADDING-RIGHT: 20px; BACKGROUND: #fff; PADDING-TOP: 0px
}
.cl-button-quickAddBTN{
float:left;
}
.bubble-closebutton {
POSITION: absolute; WIDTH: 15px; BACKGROUND: url(css/images/calendar/bined.gif) 0px -50px; HEIGHT: 15px; TOP: 10px; CURSOR: pointer; RIGHT: 10px
}
$.fn.qtip.styles.tipstyle = {
width:400,
background: '#FFFFFF',
color: 'black',
textAlign: 'center',
border: {
width: 2,
radius: 3
},
tip: {
corner:'bottomMiddle',
size:{x:12,y:12}
},
name: 'light'
}
dayclick event on fullcalendar
dayClick: function (date, allDay, jsEvent, view) {
var d=$.fullCalendar.formatDate(date,"ddd, MMM d");
$('.qtip').remove();
if(typeof $(this).data("qtip") !== "object" && allDay) {
$(this).qtip({
content:{
text:'<div id="cl_box"><table class="bubble-table" cellspacing="0" cellpadding="0">'+
'<tbody><tr><td class="bubble-cell-side"><div id="tl1" class="bubble-corner">'+
'<div class="bubble-sprite bubble-tl"></div></div></td><td class="bubble-cell-main">'+
'<div class="bubble-top"></div></td><td class="bubble-cell-side">'+
'<div id="tr1" class="bubble-corner"><div class="bubble-sprite bubble-tr"></div></div> </td></tr>'+
'<tr><td class="bubble-mid" colspan="3"><div style="overflow: hidden" id="bubbleContent1">'+
'<div><div></div><div class="cl_root">'+
'<table cellspacing="0" cellpadding="0" class="cl_table">'+
'<tbody><tr><th class="cl-key">Time:</th><td class="cl-value"><div id="bbit-cal-buddle-timeshow">'+d+'</div></td></tr>'+
'<tr><th class="cl-key">What:</th><td class="cl-value"><div class="textbox-fill-wrapper"><div class="textbox-fill-mid">'+
'<input id="bbit-cal-what" class="textbox-fill-input"></div></div><div class="cl-example">e.g., meeting at room 107</div></td>'+
'</tr></tbody></table>'+
'<input id="bbit-cal-quickAddBTN" value="Create event" type="button" class="cl-button-quickAddBTN">'+
'<span id="bbit-cal-editLink" class="lk">Edit details <strong>>></strong></span>'+
'<input type="hidden" id="box-cl" value="'+date+'">'+
'</div></div></div></td></tr></tbody></table>'+
'<div id="bubbleClose1" class="bubble-closebutton"></div></div>',
},
position: {corner: {tooltip: 'bottomMiddle', target: 'center'}},
style: {
name : 'tipstyle'
},
adjust: {
screen: true // Keep the tooltip within the viewport at all times
},
show: {
solo: true,
when: { event: 'click' },
ready: true
},
hide: false,
});
}
}
<script>
$("#bbit-cal-quickAddBTN").live('click',function(){
alert($("#box-cl").attr('value'));
});
$("#bubbleClose1").live('click',function() {
$(this).parents('qtip').hide();
});
</script>
Now when I click on a day in calendar "qTip ToolTip" appears which includes two buttons Close Button (x) and Create Event Button
When I click on create event it alerts the date of that day and when i click on close button it hides that qTip(initially I was destroying that qTip) But when I again click on the same day qTip not appears again How to handle multiple qTips which triggers on dayClick and disappears either clicking on a close button or clicking on sme other date I also want to create Event using the createEvent button in qTip
CSS applied to create a content in tooltip
.cl_root {
width: 100%;
font-size: 13px;
overflow: hidden;
}
.cl_root .cl_table {
background-color: #FFF;
width: 100%;
margin-bottom: 8px;
max-width: 100%;
}
.cl_table .cl-key {
vertical-align: top;
text-align: left;
white-space: nowrap;
font-weight: normal;
padding: .4em 1em .4em 0;
font-weight:bold;
}
.cl_table .cl-value{
width: 95%;
padding: .4em 0;
text-align:left;
}
.textbox-fill-input {
width:95%;
padding:2px;
border-width:1px;
border-color:#666 #ccc #ccc #666
}
.cl-example {
FONT-SIZE: 12px; PADDING-TOP: 2px;
font-style:italic
}
.lk {
WHITE-SPACE: nowrap; COLOR: #112abb; CURSOR: pointer; TEXT-DECORATION: underline;
float: left;padding-top: 6px;padding-left: 10px;
}
.bubble-table {
width: 100%; table-layout: fixed;margin-top: 17px;margin-bottom: 4px;
}
.bubble-cell-side {
WIDTH: 25px;
}
.bubble-mid {
PADDING-BOTTOM: 0px; PADDING-LEFT: 20px; PADDING-RIGHT: 20px; BACKGROUND: #fff; PADDING-TOP: 0px
}
.cl-button-quickAddBTN{
float:left;
}
.bubble-closebutton {
POSITION: absolute; WIDTH: 15px; BACKGROUND: url(css/images/calendar/bined.gif) 0px -50px; HEIGHT: 15px; TOP: 10px; CURSOR: pointer; RIGHT: 10px
}
$.fn.qtip.styles.tipstyle = {
width:400,
background: '#FFFFFF',
color: 'black',
textAlign: 'center',
border: {
width: 2,
radius: 3
},
tip: {
corner:'bottomMiddle',
size:{x:12,y:12}
},
name: 'light'
}
dayclick event on fullcalendar
dayClick: function (date, allDay, jsEvent, view) {
var d=$.fullCalendar.formatDate(date,"ddd, MMM d");
$('.qtip').remove();
if(typeof $(this).data("qtip") !== "object" && allDay) {
$(this).qtip({
content:{
text:'<div id="cl_box"><table class="bubble-table" cellspacing="0" cellpadding="0">'+
'<tbody><tr><td class="bubble-cell-side"><div id="tl1" class="bubble-corner">'+
'<div class="bubble-sprite bubble-tl"></div></div></td><td class="bubble-cell-main">'+
'<div class="bubble-top"></div></td><td class="bubble-cell-side">'+
'<div id="tr1" class="bubble-corner"><div class="bubble-sprite bubble-tr"></div></div> </td></tr>'+
'<tr><td class="bubble-mid" colspan="3"><div style="overflow: hidden" id="bubbleContent1">'+
'<div><div></div><div class="cl_root">'+
'<table cellspacing="0" cellpadding="0" class="cl_table">'+
'<tbody><tr><th class="cl-key">Time:</th><td class="cl-value"><div id="bbit-cal-buddle-timeshow">'+d+'</div></td></tr>'+
'<tr><th class="cl-key">What:</th><td class="cl-value"><div class="textbox-fill-wrapper"><div class="textbox-fill-mid">'+
'<input id="bbit-cal-what" class="textbox-fill-input"></div></div><div class="cl-example">e.g., meeting at room 107</div></td>'+
'</tr></tbody></table>'+
'<input id="bbit-cal-quickAddBTN" value="Create event" type="button" class="cl-button-quickAddBTN">'+
'<span id="bbit-cal-editLink" class="lk">Edit details <strong>>></strong></span>'+
'<input type="hidden" id="box-cl" value="'+date+'">'+
'</div></div></div></td></tr></tbody></table>'+
'<div id="bubbleClose1" class="bubble-closebutton"></div></div>',
},
position: {corner: {tooltip: 'bottomMiddle', target: 'center'}},
style: {
name : 'tipstyle'
},
adjust: {
screen: true // Keep the tooltip within the viewport at all times
},
show: {
solo: true,
when: { event: 'click' },
ready: true
},
hide: false,
});
}
}
<script>
$("#bbit-cal-quickAddBTN").live('click',function(){
alert($("#box-cl").attr('value'));
});
$("#bubbleClose1").live('click',function() {
$(this).parents('qtip').hide();
});
</script>
Now when I click on a day in calendar "qTip ToolTip" appears which includes two buttons Close Button (x) and Create Event Button
When I click on create event it alerts the date of that day and when i click on close button it hides that qTip(initially I was destroying that qTip) But when I again click on the same day qTip not appears again How to handle multiple qTips which triggers on dayClick and disappears either clicking on a close button or clicking on sme other date I also want to create Event using the createEvent button in qTip
Share Improve this question edited May 27, 2012 at 12:09 RichardTowers 4,7621 gold badge28 silver badges43 bronze badges asked May 27, 2012 at 11:50 geek2geek_AWSgeek2geek_AWS 5661 gold badge7 silver badges18 bronze badges3 Answers
Reset to default 1You need to set the hide property of the qTip constructio from "false" to somthing like the following:
Example:
hide: show: {
target: $(this).find('#bubbleClose1'),
when: { event: 'click' },
ready: true
}
});
I have never worked with qTip, but it seems this should do. It will bind the hide event to the close button inside the children hierarchy of the current instance. Qtip may be using a toggle class or something, to handle the hide/show methods. If this is the case, you may be disrupting the pattern. Even by calling it externally under the binding of "live".
Your option for hide doesn't seem to match the apidoc, have you tried not setting it to hide:false but instead specifying the event that hides it (see the qtip doc), to let qtip do all the showing and hiding?
The following codes should work. and also needs to fix a bug in qtip.js. I use version 1.0.0-rc3, and need to replace line 1003 from for(i = 0; i < interfaces.length - 1; i++) to for(i = 0; i < interfaces.length; i++).
I suggest change to other tooltip library instead of qtip. It's over-designed without good purpose which will cause many GHOST HTML elements. or could try qtip2.
<script type="text/javascript">
$(function() {
var self;
$("#calendar").fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
self = this;
var d=$.fullCalendar.formatDate(date,"ddd, MMM d");
if ($(this).data('qtip') == null || $(this).data("qtip").interfaces.length < 1) {
$(this).qtip({
content: {
text: '<div><table class="bubble-table" cellspacing="0" cellpadding="0">'+
'<tbody><tr><td class="bubble-cell-side"><div class="bubble-corner">'+
'<div class="bubble-sprite bubble-tl"></div></div></td><td class="bubble-cell-main">'+
'<div class="bubble-top"></div></td><td class="bubble-cell-side">'+
'<div class="bubble-corner"><div class="bubble-sprite bubble-tr"></div></div> </td></tr>'+
'<tr><td class="bubble-mid" colspan="3"><div style="overflow: hidden" >'+
'<div><div></div><div class="cl_root">'+
'<table cellspacing="0" cellpadding="0" class="cl_table">'+
'<tbody><tr><th class="cl-key">Time:</th><td class="cl-value"><div >'+d+'</div></td></tr>'+
'<tr><th class="cl-key">What:</th><td class="cl-value"><div class="textbox-fill-wrapper"><div class="textbox-fill-mid">'+
'<input class="textbox-fill-input"></div></div><div class="cl-example">e.g., meeting at room 107</div></td>'+
'</tr></tbody></table>'+
'<input value="Create event" type="button" class="cl-button-quickAddBTN">'+
'<span class="lk">Edit details <strong>>></strong></span>'+
'<input type="hidden" value="'+date+'">'+
'</div></div></div></td></tr></tbody></table>'+
'<div class="bubble-closebutton">X</div></div>'
},
position: {
corner: {
tooltip: "bottomMiddle",
target: "center"
}
},
adjust: {
screen: true
},
show: {
solo: true,
when: {event: "click"},
ready: true
},
hide: false
});
}
}
});
$(".cl-button-quickAddBTN").live('click',function(){
alert($("#box-cl").attr('value'));
});
$(".bubble-closebutton").live('click',function() {
$(self).qtip("Destroy");
});
$.fn.qtip.styles.tipstyle = {
width:400,
background: '#FFFFFF',
color: 'black',
textAlign: 'center',
border: {
width: 2,
radius: 3
},
tip: {
corner:'bottomMiddle',
size:{x:12,y:12}
},
name: 'light'
}
});
</script>