I've run into a problem, where I have more than 10 popovers in one table. They all should display a popover on hover, and have a similar html, but with some differences in content. I made it the easiest way, but I feel there must be a smarter way to do this.
Is it possible to make this js code more DRY?
$('#static-pop-1').popover({
'trigger': 'hover',
'placement': 'bottom',
'html': true,
'content': '<div class="static-popover"><span>Hey!</span></div>'
});
$('#static-pop-2').popover({
'trigger': 'hover',
'placement': 'bottom',
'html': true,
'content': '<div class="static-popover"><span>Hey 2!</span></div>'
});
http://jsfiddle.net/axt63orn/
Assuming you don't want the popover to just say Hey 1, Hey 2 etc. but actually set a different content in each, but keep the rest of the settings the same, you can do
var settings = {
trigger : 'hover',
placement : 'bottom',
html : true
}
$('#static-pop-1').popover($.extend({}, settings, {
content: '<div class="static-popover"><span>Hey!</span></div>'
}));
$('#static-pop-2').popover($.extend({}, settings, {
content: '<div class="static-popover"><span>Hey 2!</span></div>'
}));
$('#static-pop-3').popover($.extend({}, settings, {
content: '<div class="static-popover"><span>Hey 3!</span></div>'
}));
FIDDLE
or you could use a function
function setting(text) {
return {
trigger : 'hover',
placement : 'bottom',
html : true,
content : '<div class="static-popover"><span>'+text+'</span></div>'
}
}
$('#static-pop-1').popover(setting('Hey!'));
$('#static-pop-2').popover(setting('Hey 2!'));
$('#static-pop-3').popover(setting('Hey 3!'));
FIDDLE
You could use data attribute:
<a class="pop" id="static-pop-1" data-mycontent="Hey 1!" title="">Content 1</a>
$('.pop').popover({
'trigger': 'hover',
'placement': 'bottom',
'html': true,
'content': function(){
return '<div class="static-popover"><span>'+$(this).data('mycontent')+'</span></div>';
}
});
JSFiddle
Related
Is there any way we can hide bootstrap tool-tips instead of destroying them.
I am using server side data in tool-tips and I don't want to load data every time a tool-tip is initiated.
$('.selector').popover({
animation: true,
trigger: 'click',
title: 'Notifications',
content: 'No new notificaitons',
placement: 'right',
container: 'body',
html: true,
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
<span class="selector">selector</span>
You don't have to hide your tooltip, you have an other way.
You can load your server side data in a global object and use this object when you open your tooltip.
In this case, your data is load only one times, and you don't have to change the tooltip.
Example :
var myObject = {};
$.get(PHP_PAGE, DATAS).done(function(data){
//HERE GET YOUR DATA LIKE
myObject = data;
});
...
$('.selector').popover({
animation: true,
trigger: 'click',
title: myObject.title,
content: myObject.contentMessage,
placement: 'right',
container: 'body',
html: true,
})
I need to show image title, date and link on the right side of the image.
something similar to this example
by default fancybox allow us few option like inside, outside, top but not left or right side of image. and with navigation buttons < >
$(".fancybox").fancybox({
helpers : {
title: {
type: 'inside',
position: 'top'
}
},
nextEffect: 'fade',
prevEffect: 'fade'
});
Is there a ways we can do it like as shown in image below
Fiddle example http://jsfiddle.net/JYzqR/
You can use fancybox tpl (template) option and add information on callback like afterLoad like so:
$(".fancybox").fancybox({
helpers : {
title: {
type: 'inside',
position: 'top'
}
},
nextEffect: 'fade',
prevEffect: 'fade',
afterLoad: function() {
var html = '<span>Date, File Type, Download</span>';
$('.fancybox-sidebar').append(html);
},
tpl: {
wrap : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div><div class="fancybox-sidebar"></div></div></div></div>'
}
});
DEMO
I want to change the direction of my tab's tooltip.
I want to make it align to the top.
My code is like this :
var toolTip = 'test';
var panelExpertCharts = Ext.create('ContainerListChartExpert', {
chartList: chartList,
layout: standardLayout,
idIndicator: idIndicator,
idOrganisation: organisationObj.id,
title: chartList[0].titleExpert,
closable: true,
tabConfig: {
tooltip: toolTip
}
});
Thanks for reply.
Hamza.
Hi you can change a tooltip alignment in the following way
listeners: {
render: function(c) {
new Ext.ToolTip({
target: 'trackCallout',
anchor: 'right',
html: 'Test Tooltip'
});
}
}
You can check a very good example here from sencha .
I use Bootstrap to display a popover, until there is with all this code below everything works normal.
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
I only need to load the content of the page via ajax, then I changed the code because when I load the content dynamically I need to delegate events, changed the code and it looked like this:
$('body').on('click','.emoticons',function()
{
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
});
Now my troubles started. The code works however when I click the first time it does not work, so it works when I click more than once on the link. What to do?
What's happening is that when you are clicking on the .emoticons and executing your popover function, it is at that moment that you are binding it to your click. That's why it doesn't work the first time, but it works afterwards. It starts listening to the click event after that.
Ideally, the solution is to run the .popover function when the new content is loaded (on your AJAX callback).
If you want to just copy paste my code and see if it works, you can do this:
$('body').on('click','.emoticons',function()
{
// Convert this element into a popover and then display it
$(this).popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {
return $('.emoticonimg').html();
}
}).popover('toggle');
});
But, I would NOT recommend this code specifically, since you are re-initializing your popover every time you click on it.
It's better and more clear if you bind all popovers after your AJAX request is done:
$.ajax( "BlaBlaBla.php" )
.done(function() {
// Convert all emoticons to popovers
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {
return $('.emoticonimg').html();
}
});
});
It doesn't work the first time because the first click if firing off the body onclick handler which binds your popover.
Try something like this in your $(document).ready() function.
$(".emoticons").click(function(){
$(this).popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
});
I am currently trying to add a qtip2 to my fullCalendar window so I could display the qtip and have a link/button to remove the selected event on the calendar, unfortunately I am having trouble with that. Here is what my fullCalendar looks like:
$('#calendar_main').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView:'agendaWeek',
minTime:8,
height:600,
maxTime:20,
editable: true,
allDaySlot:false,
theme: true,
firstDay: 1,
selectable: true,
selectHelper: true,
eventRender: function(event, element) {
element.qtip({
content: "<a onlick='alert('Remove')> Remove me</a>",
title: {
text: 'RDV',
button: false
}
},
position: {
at: 'right-bottom'
},
show: {
solo: true
},
hide: false,
style: 'ui-tooltip-light ui-tooltip-rounded'
});
}
});
I believe the issue sits within the content attribute of qtip, but not sure why this does not work. In this case I am just trying to display an alert, but it is not working (The Qtip displays, but when I click on "remove me", nothing happen. Once I get that working, I will be able to replace the Alert with my own JS function that will remove the selected event in my DB.
ps: I am working with Adobe Air, not sure if this could be an issue.
Well for one, you need to escape the single quotations to form the string in the alert.
And second, you forgot to close the alert with a single quote in the tag. Hope it helps...
'<a onlick="alert(\'Remove\');"> Remove me</a>'
This is how it should look.
probably couse you are using call procedure for qTip but in real you are using qTip2. Use in real (source script) old version qTip 1.00xxx and all will be ok - I did do it.
I am actually doing the same thing and I can remove it fine. The only issue I run into is when the event is destroyed the qtip sticks around so running into an issue where eventDestroy never gets called.
Anyway I call calendarEventRender:
$('#calendar').fullCalendar({
firstDay: 1,
header: {
left: '',
center: '',
right: ''
},
defaultView: 'agendaWeek',
allDaySlot: false,
columnFormat: {
week: 'ddd'
},
selectable: true,
selectHelper: true,
editable: true,
droppable: true,
eventRender: function(event, element) {
calendarEventRender(event, element);
}
});
Here are my functions:
function calendarEventRender(event, element)
{
element.qtip({
content: {
title: { text: event.title },
text: '<button type="button" onclick="removeEvent(' + event.id + ')">Delete</button>'
},
show: {
event: 'click',
solo: true
},
hide: {
event: 'unfocus click'
}
});
}
function removeEvent(eventId, userId)
{
//Delete the event
$('#calendar').fullCalendar('removeEvents', eventId);
}
And it all seems to work. I don't have time to go through and grab your code, but hopefully this helps. Also in the future if you can get a http://jsfiddle.net/ of it up not working people can test and fix it a lot easier.
Hmm so I created a jsfiddleto test it all: http://jsfiddle.net/MusicMonkey5555/pZdyt/1/
and it seems to not work in there. My guess is that it is jquery or qtip or fullcalendar version. That is the one issue with jsfiddle is getting the correct version of everything. The one I have working on my site are the following:
//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css
//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js
//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css
//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.print.css
//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.min.js
//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.min.css
So I would suggestion trying to use those versions and see if it works. Most often it is because jquery has a bug and you need a different version.