I can't get JQueryUI to pay any attention to the tooltip settings I am trying to apply
var li = jQuery('<li title="test">test</li>');
jQuery(myUl).append(li);
jQuery(li).tooltip({
track: true,
position: {
my: "left top",
at: "bottom",
using: function (position, feedback) {
$( this ).css( position );
$("<div>").addClass("arrow")
}
},
content: function () {
return $(this).attr('title');
}
});
I know that the tooltip() function is being called because I can comment it out and the display reverts back to the standard tooltip, but nothing in the parameters makes any difference to the display. My first priority is to get the content to appear on multiple lines, for that I have added <br /> tags at the right places. But so far they always get displayed to the user.
Help!
It appears to be a user error. I had no idea that Bootstrap also provided a Tooltip function and it is taking priority here. Once I started using Bootstrap Tooltip options they were used just fine
remove the line:
var li = jQuery('<li title="test">test</li>');
add <li> element directly to jQuery:
jQuery('li').tooltip({
track: true,
position: {
my: "left top",
at: "bottom",
using: function (position, feedback) {
$( this ).css( position );
$("<div>").addClass("arrow")
}
},
content: function () {
return $(this).attr('title');
}
});
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 am trying to show tooltips in a mouseover event in cytoscape.js using qtip. The tooltip is displayed when the mouse is over a node in the graph, however, it is positioned at the top-left corner of the graph, instead of showing at the bottom of the node. Here is the code to display the graph:
this.cyto = cytoscape({
container: document.getElementById("graph"),
layout: {
name: 'spread',
minDist: 200
},
elements: this.graph.elements,
style: this.cy_style
});
Add here is the code I am using to add the qtip
this.cyto.nodes().forEach(function (element) {
var nodeName = element.data("name");
if (nodeName) {
element.qtip({
content: {
text: nodeName
},
position: {
my: 'bottom center',
at: 'bottom center',
adjust: {
y: 50,
mouse: false
}
},
show: {
event: 'mouseover'
},
hide: {
event: 'click mouseout'
},
style: {
classes: 'qtip-bootstrap'
}
});
}
});
Here is a screenshot showing how the tooltip is currently being displayed:
As you can see in the image above, the tooltip displays at the top left corner of the graph. However, I want to display the tooltip like this:
How can I make the tool-tip display at the proper position? What am I doing wrong here?
It looks like you're missing the qtip stylesheet, which I believe qtip needs to work.
You can refer to the demo code for a working example: http://js.cytoscape.org/demos/qtip-extension/
I am stuck up with a problem and that is annoying me. I hope someone can help me on this.
Please imagine I have a Icon called Communication. On click of that Icon, I should get a tooltip (should kept open until I click outside or on the same Communication Icon)
So the tooltip should contain few other icons like Phone, Email, In Person Icons and I should be able to drag and drop them in another div element.
Note that the Icons from the Communication's Tooltip should not be deleted.
Below is the sample, that I have found and modified a bit.
$(function() {
$( document ).tooltip({
items: "input",
content: function() {
return $('.myPopover').html();
},
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
$('.fireTip').click(function () {
if(!$(this).hasClass('open')) {
$('#age').trigger('mouseover');
$(this).addClass('open');
} else {
$('#age').trigger('mouseout');
$(this).removeClass('open');
}
})
});
http://jsfiddle.net/AK7pv/961/
I am actually expecting similar to this example, but instead of the list tags, I want the Icons to be arranged in series and it should be drag-gable to other div elements.
Please assist me, whether this is possible or not. We can use Jquery, Javascript, Kendo UI to do this.
I'm using jquery-1.7.2.min.js and jquery-ui.min.js and wanted to implement a Tooltip. It worked right out of the box, but later I planned to customize some of the default effects and they don't seem to work.
Here's the code:
$(function () {
var temp = $("#tooltipname").attr('title');
$("#tooltipname").tooltip({
content: temp,
position: "top",
opacity: 0.1,
effect: 'fade',
predelay: 3000,
fadeInSpeed: 3000,
});
})
the strange thing is that the content attribute works fine and as you can see I assign it a value of temp variable. The value of temp is read from the title value of HTML span tag. Nevertheless the other attributes don't work at all.
I've played a bit with my code after getting help from you guys and decided to share the code I made in jsFiddle. I show how to implement not only one tooltip but all tooltips designated by #tooltipname on the whole page. Moreover the code shows how to break lines (multiline tooltip), which was not trivial to achieve.
Here's the HTML code:
<br />
<br />
<br />
<span title="my tooltip1 <br> new line" id="tooltipname">Hover me</span>
<span title="my tooltip2 <br> new line" id="tooltipname">Hover me2</span>
Here's the jQuery code:
$(document).ready(function () {
var temp = $("#tooltipname").attr('title');
$(this).tooltip({
content: function () {
return $(this).attr("title");
},
position: {
at: "center bottom",
my: "center top"
},
opacity: 0.1,
show: {
effect: 'fadeIn',
duration: 500,
delay: 500
},
});
});
Hope it's helpfull for other newcomers to JQuery.
For those of you who'd like to play with this code -> jsFiddle Code
It is working as expected. Your p is taking the 100% width of the page, and the tooltip is positioning on the top and center of that. You need to set your '#tooltipname' as 'inline-block' or something like that.
And according to the documentation you need to set the my and at values.
Fiddle
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/