When I use bootstrap 3.0 popover with placement: auto right inside tables it doesn't work, and it flows away from the table size.
placement: auto right (means popover should flow to the right if it has a place otherwise flow to the left)
Check this link:
http://jsfiddle.net/DTcHh/65
However, when I place it outside a table it works as it's supposed to be!
$('button.hey').popover({
placement: 'auto left',
html: true,
//selector: '[rel="popover"]',
content: function () {
return "Hi man";
}
})
Any idea?
In your case I suggest you to write your own callback for placement rather using 'auto'.
If you want 'right' for your all buttons except last td. Here is how placement can be written
$('button.hey').popover({
placement: function(context,source){
//check if current td is last one
var td = $(source).closest('td');
console.log(td);
if(td.next().length == 0) {
return 'left';
}
return 'right';
},
html: true,
//selector: '[rel="popover"]',
content: function () {
return "Hi man";
}
})
If you want to handle based on position, you can handle that in placement callback.
check this fiddle http://jsfiddle.net/codejack/DTcHh/66/
Related
I am using TippyJS to show a tooltip but for some reason when first click the tooltip it is positioned way too much to the right, and if you have a small screen it will even go outside of view.
Example:
While after I scroll a bit, or resize the page it gets positioned correctly.
Example:
What could be causing this behaviour?
Example codepen (shopping cart is empty but still has the same behaviour when clicking/scrolling): https://codepen.io/twan2020/pen/ZEBvYXv
I've tried setting boundary:viewport in the options like this:
$( ".carttip" ).each(function( i ) {
tippy(this, {
theme: 'blue',
trigger: 'click',
allowHTML: true,
animation: 'scale-subtle',
maxWidth: 400,
boundary: 'viewport',
interactive: true,
content: function (reference) {
return reference.querySelector('.tooltipcontent');
},
onShow(instance) {
refreshcart(true);
}
});
});
But this changed nothing.
As Stavros Angelis points out, the tippy instance positioning is already calculated when the content is applied. To reposition the tooltip when the ajax call resolves, you could pass the tippy instance into the refreshcart() function and then accessing the popper instance inside it to refresh the tooltip:
function refreshcart(force, tippyInstance) {
$.ajax({
type: 'post',
url: 'includes/refreshcart.php',
data: ({}),
success: function(data){
$('body #headercart').empty().append(data);
tippyInstance.popperInstance.update(); // Here, the tippy positioning is updated
}
});
}
// other code...
$( ".carttip" ).each(function( i ) {
tippy(this, {
theme: 'blue',
trigger: 'click',
allowHTML: true,
animation: 'scale-subtle',
maxWidth: 400,
boundary: 'viewport', // This has been dropped in tippy#6
interactive: true,
content: function (reference) {
return reference.querySelector('.tooltipcontent');
},
onShow(instance) {
refreshcart(true, instance);
}
});
});
As for the boundary: seems like tippy#6 (which your example uses) has dropped this prop, so it can be removed here.
More on the popper instance here: https://github.com/atomiks/tippyjs/issues/191
The problem comes from the onShow function. The way your code works is that first you open the popup, then you do an ajax call and fetch some html to append in the tippy box. At that point the tippy box has already rendered and calculated the position of the box with a 0 width and 0 height. Then the ajax call completes and the container changes dimensions and ends up outside the viewport.
The tippyjs documentation covers that here with a very clean example: https://atomiks.github.io/tippyjs/v6/ajax/
I have set up an intro of a web page using the steps and setoptions functionality, and it works fine except when the user presses back.
The two issues I find are:
scrolltoelement works fine going forward, but the tooltip goes partly off screen when going backwards
the element selected in the first step is the entire page, so I use an "onafterchange" callback to reset the tooltip top and right offset. This works fine, except it appears to be ignored (or overwritten) when the back key is pressed
The javascript is:
var introProfile = introJs();
introProfile.setOptions({
tooltipPosition : 'top',
steps: [
{
element: '#intro_step1',
intro: 'Welcome to your example.com dashboard, where you can update your skills, your availability, and your professional details so that ...',
position: 'top'
}, {
element: '#intro_step2',
intro: 'Your profile contains important information which is important to complete so that...',
position: 'bottom'
},
{
element: '#intro_step3',
intro: 'Make sure your attribute is included in your profile because the client may express a preference.',
position: 'top'
},
{
element: '#intro_step4',
intro: 'Click here to add a photograph of yourself.',
position: 'top'
},
{
element: '#intro_step5',
intro: 'Your photograph will appear when your profile matches a ...',
position: 'top'
},
{
element: '#intro_step6',
intro: 'Take example.com with you, on your Android or Apple phone by clicking here.',
position: 'top'
}
]
});
introProfile.oncomplete(function() {
;
});
introProfile.onexit(function(){
;
});
introProfile.onchange(function(targetElement) {
; //add change bits here
});
introProfile.onafterchange(function(targetElement) {
console.log(targetElement.id);
switch (targetElement.id){
case "intro_step1":
$('.introjs-tooltip').css({top:'80px',left:'200px'});
}
});
introProfile.onbeforechange(function(targetElement) {
; // add change bits here
});
introProfile.start();
All I am doing in the HTML is setting the element id for intro_step1 to intro_step6
You can see the fiddle here: https://jsfiddle.net/brianlmerritt/3ocyuu65/10/
Any idea why "back" functionality is different from forward?
The problem was you wanted to change the position of the tooltip for the 1st step by using -
$('.introjs-tooltip').css({top:'80px',left:'200px'});
This was added in the "onafterchange" function -
introProfile.onafterchange(function(targetElement) {
console.log(targetElement.id);
switch (targetElement.id){
case "intro_step1":
$('.introjs-tooltip').css({top:'80px',left:'200px'});
}
});
Now this function was as expected called when you initialised the introjs - meaning after the position was changed by the introjs and then was overridden by your positions in the "onafterchange" function
But in case of when you hit back this function was called after the position was changed by introjs. So to fix this i used "setTimeout"
setTimeout(function(){
$('.introjs-tooltip').css({top:'80px',left:'200px'});
},600)
So now your positions are now overridden for the tooltip
Note: Your code would have worked if the poition changes for the tooltip was completed first and then the "onafterchange" function was called.
Fiddle: https://jsfiddle.net/kushal812/3ocyuu65/11/
Let me know if you find a better way!!
Really IntroJS is showing some errors when using the Back button. Here is the solution using Ionic with the Typescript Framework:
export class HomePage {
introApp = introJs.introJs(); //Declared the IntroJS
...
this.intro(); // Call the method
...
intro() { this.introApp.setOptions({...})} //Set the options in IntroJS
//Bug Correction
this.introApp.onafterchange(function(targetElement) {
console.log(targetElement.id);
switch (targetElement.id){
case "b1":
setTimeout(function(){
var element = document.getElementsByClassName('introjs-tooltip');
var boxArrow = document.getElementsByClassName('introjs-arrow top');
var numberLayer = document.getElementsByClassName('introjs-helperNumberLayer');
element.item(0).setAttribute("style", "top:210px;");
boxArrow.item(0).setAttribute("style", "display: block");
numberLayer.item(0).setAttribute("style", "left: 0; top:0;");
},600)
}
});
I am using raty to perform the rating functionality and I am showing it inside a popover.
The problem is that the first time I click on the link, it correctly create the stars but, when I click for the second time, the stars are replicated, so it popups 10 stars instead of 5.
$('#member1').popover({
html: true,
placement: 'bottom',
content: function() {
return $($(this).data('contentwrapper')).html();
}
}).click(function() {
$('.star').each(function(el) {
$(this).raty({
starOff : 'http://wbotelhos.com/raty/lib/images/star-off.png',
starOn : 'http://wbotelhos.com/raty/lib/images/star-on.png',
start: $(this).attr('data-rating')
});
});
});
I replicate the error in this fiddle.
Can anyone let me know how to fix this, and, therefore, only show 5 stars?
Thanks!!!!
I am not overly familiar with raty, but it seems like you need to destroy the existing before running the code a second, or third time.
$(this).raty('destroy');
something like that, check the raty doc for the exact implimentation
please review this code
$('#member1').popover({
html: true,
placement: 'bottom',
content: function() {
return $($(this).data('contentwrapper')).html();
}
}).click(function() {
$('.star').each(function(el) {
$(this).raty('destroy');
$(this).raty({
starOff : 'http://wbotelhos.com/raty/lib/images/star-off.png',
starOn : 'http://wbotelhos.com/raty/lib/images/star-on.png',
start: $(this).attr('data-rating')
});
});
});
Demo :http://jsfiddle.net/x9WhH/3/
I'm using Tipsy to display some content; inside this content I have a link (a big X) that is intended to close the tooltip. However, when clicked, it simply jumps to the top of the page and fails to close the tooltip, even though I have it set to return false. My code looks like this:
$(".favs").tipsy({
fade: true,
gravity: 'n',
trigger: "manual",
html: true,
offset: 5,
opacity: '0.9',
delayIn: 0,
delayOut: 0,
title:
function() {
return $("#favs_1").html();
}
});
$(".favs").click(function(){
$(this).tipsy("show");
return false;
});
$(".closetip").click(function(){
$(".tipsy").remove();
return false;
});
Applied to this HTML:
<div style="height: 1800px;">
<br /><br /><br /><br />
Favorite Movies
</div>
<div id="favs_1" style="display: none;">
X
Tooltip content
</div>
Relevant fiddle: http://jsfiddle.net/gZkJJ/
I solved half the problem by having any click result in a tooltip closure. I tried to exempt clicks in certain divs from this with event.stopPropagation(); -- that led to the tooltip being closed, but a) the divs in question were not exempt and b) the X still jumped to the top of the page. Same HTML as above, but with this slightly different JavaScript:
$(".favs").tipsy({
fade: true,
gravity: 'n',
trigger: "manual",
html: true,
offset: 5,
opacity: '0.9',
delayIn: 0,
delayOut: 0,
title:
function() {
return $("#favs_1").html();
}
});
$(".favs").click(function(){
$(this).tipsy("show");
return false;
});
$("html, .closetip").click(function() {
$(".tipsy").remove();
});
$(".tipsy, .tipsy-n, .tipsy-inner, .favs").click(function(event){
event.stopPropagation();
});
Relevant fiddle for this variation: http://jsfiddle.net/u62eH/
I included the excessive height and spacing so that you can verify the link is either reloading the frame or forcing a scroll to the top, which you can do by scrolling down slightly before hitting the X.
Any help would be much appreciated. I feel like I'm missing something obvious.
In the event handler for clicking on either the html element or the .closetip element, call e.preventDefault() if it was the anchor:
$("html, .closetip").click(function(e) {
if(e.target.nodeName === 'A')
e.preventDefault();
$(".tipsy").remove();
});
I have a page with a slider showing posts from a category. When the user clicks "next category", the content goes left and the new content is loaded along with it's slider.
This .load() is making a request to the same page, with different parameters (don't really know if this is relevant to the question).
Problem is, the loaded slider doesn't work. You can see it here, click on the top right arrow and you'll see my problem.
This is the script I'm using:
function carousels(){
if ($("#projectos-carousel").length) {
$("#projectos-carousel").carouFredSel({
items: { visible: 5 },
circular: false,
infinite: false,
auto: false,
prev: { button : "#prev-proj" },
next: { button : "#next-proj" },
pagination : "#pager-proj",
});
}
}
...
$('.right-trigger').click(function () {
var toLoad = $(this).attr('href')+' #container';
$('#container').attr('id','to-go');
$('#to-go').css({'position': 'absolute'});
$('#wrapper').append('<div id="newcontainer"/>');
$('#newcontainer').load(toLoad, function () {
$('#newcontainer').append($('#container').children()).css({'position': 'absolute', 'left': '942px'});
$('#to-go, #newcontainer').animate({left:'-=937'},600, function () {
$('#to-go').remove();
});
$('#container').remove();
$('#newcontainer').attr('id','container');
searchform();
triggers();
carousels();
});
return false;
});
searchform() and triggers() functions work but not carousels(). I've already tried using setTimeout(); with carousels() in the last part of the code but it only works on this example, not where I really want to.
Thank you for your time!
It appears to work for me. One problem that I see in your code that will manifest itself as a bug in Internet Explorer is that you have a trailing comma on this line:
pagination : "#pager-proj",
Removing the comma may fix everything for you. Additionally, I would suggest wrapping all of your object properties in single or double quotes. For example, the previous line would become:
"pagination": "#pager-proj"