I can t change the position of tooltip in highcharts:
tooltip: {
positioner: function() {
return {
x: 20,
y: 20
};
}},
http://jsfiddle.net/e07s2oq6/
Doc:
https://api.highcharts.com/highstock/tooltip.positioner
I want to change the tooltip like this:
Here is an ugly solution that solves your problem.
I set the tool-tip positioner to the following:
tooltip: {
split: false,
positioner: function() {
return {
x: this.now.anchorX - this.label.width/2,
y: 20
};
}
},
Now it shows a tool-tip centered above the point that is being hovered.
Working example: http://jsfiddle.net/ewolden/e07s2oq6/3/
Related
I have a use case where I would like to create a diagram with joint.js, where some elements could be linked normally, but some shouldn't accept to or from links at all.
Is there some certain function or property that would allow this?
use the magnet:false attribute e.g:
new joint.shapes.basic.Rect({
position: { x: 50, y: 50 },
size: { width: 300, height: 200 },
attrs: {
'.': { magnet: false }
}
});
How to keep all the qtips inside a container (I have already tried position.container, position.viewport and position.adjust.method) without any luck, my best guess is that I am not using them correctly.
Update:1 I have created a sample app with more details on below url
http://secure.chiwater.com/CodeSample/Home/Qtip
Update:2 I have created jsfiddle link too. http://jsfiddle.net/Lde45mmv/2/
Please refer below screen shot for layout details.
I am calling the area shown between two lines as $container in my js code.
So far I have tried tweaking viewport, adjust method but nothing helped. I am hoping this is possible and I would greatly appreciate any help.
Below is my javascript code which creates qtip2.
//Now create tooltip for each of this Comment number
$('#cn_' + num).qtip({
id: contentElementID,
content: {
text: .....
var $control = $('<div class="qtip-parent">' +
' <div class="qtip-comment-contents">......</div>' +
' <div class="clearfix"></div>' +
' <div class="qtip-footer"><span class="qtip-commenter">...</span><span class="pull-right">...</span></div>' +
'</div>'
);
return $control;
},
button: false
},
show: 'click',
hide: {
fixed: true,
event: 'unfocus'
},
position: {
my: 'top right',
at: 'bottom right',
target: $('#cn_' + num),
container: $container,
//viewport: true,
adjust: { method: 'shift none' }
},
style: {
tip: {
corner: true,
mimic: 'center',
width: 12,
height: 12,
border: true, // Detect border from tooltip style
//offset: 25
},
classes: 'qtip-comment'
},
events: {
show: function (event, api) {
...
},
hide: function (event, api) {
...
}
}
});
Example of jalopnik page which shows what I am looking for (FWIW jalopnik example doesn't use qtip2).
I don't think qtip API supports this functionality. I ended up re-positioning the tooltip on visible event.
I have updated the demo page and jsfiddle link below is code for doing this.
events: {
visible: function (event, api) {
var $qtipControl = $(event.target);
$qtipControl.css({ 'left': contentPosition.left + "px" });
var $qtipTipControl = $qtipControl.find(".qtip-tip");
var $target = api.get("position.target");
$qtipTipControl.css({ "right": 'auto' });
//I am using jquery.ui position
$qtipTipControl.position({
my: "center top",
at: "center bottom",
of: $target
});
}
}
Problem with this approach is that there is noticeable jump when I re-position the qTip. But in lack of any other option for time being I will settle with this.
The ideal approach would be to allow callback method thru position.adjust currently it only supports static values for x and y, if a method was allowed here it would make things much smoother.
var el1 = new joint.shapes.custom.ElementLink({
position: { x: 80, y: 80 },
size: { width: 170, height: 100 },
attrs: {
rect: { fill: '#E67E22', stroke: '#D35400', 'stroke-width': 5 },
a: { 'xlink:href': 'http://jointjs.com', 'xlink:show': 'new', cursor: 'pointer' },
text: { text: 'Element as a link:\nhttp://jointjs.com', fill: 'white' }
}
});
I want a handler for anchor tag where I can call any event from my viewmodel
It depends what you want exactly. If you're using the joint.shapes.custom.ElementLink from this tutorial: http://jointjs.com/tutorial/hyperlinks, then this shape is defined so that it is totally wrapped in the <a> anchor tag and so clicking anywhere inside the element will follow the link. However, you can catch the click event and, for example, based on the target of the event or some other condition decide whether you want to follow the link or do other things:
paper.on('cell:pointerclick', function(cellView, evt, x, y) {
// evt.target contains the SVG subelement that was the target of the click
// cellView is the view for the joint.shapes.custom.ElementLink cell model
// cellView.model is the cell model
if (someCondition) {
// This is how you can prevent the default browser action which is
// following the <a> link.
evt.preventDefault();
}
})
How to set non pixels position?
I try this
var stack = { "dir1": "down", "dir2": "right", "firstpos1": 50, "firstpos2": 50 };
But I this it is bad because of different screen resolution.
Necroposting, but may help to other searchers. My solution without js recalculations:
js:
new PNotify({
...
addclass: 'pnotify-center'
});
css:
.pnotify-center {
right: calc(50% - 150px) !important;
}
there's a similar question with an answer here. As per the first example in the stacks documentation, you can center the initial position of the notification by setting the top/left css propreties in before_open. You also need to reposition the notification everytime the window is resized.
function get_center_pos(width, top) {
// top is empty when creating a new notification and is set when recentering
if (!top) {
top = 30;
// this part is needed to avoid notification stacking on top of each other
$('.ui-pnotify').each(function() {
top += $(this).outerHeight() + 20;
});
}
return {
"top": top,
"left": ($(window).width() / 2) - (width / 2)
}
}
$(document).ready(function() {
new PNotify({
title: "this is center",
text: "blablabla",
opacity: 0.90,
type: "info",
width: "390px",
before_open: function(PNotify) {
PNotify.get().css(get_center_pos(PNotify.get().width()));
}
});
$(window).resize(function() {
$(".ui-pnotify").each(function() {
$(this).css(get_center_pos($(this).width(), $(this).position().top))
});
});
});
I use Masonry and infinitescroll and it works great together. I have tried to add curvycorners.js and make it load every time infinitescroll loads a new page, but to be honest, I have no idea what I'm doing.
Does anyone know how I can add the code below, so that it loads everytime infinitescroll loads a new page.
curvyCorners.addEvent(window, 'load', initCorners);function initCorners() {
var settings = {
tl: { radius: 5 },
tr: { radius: 5 },
bl: { radius: 5 },
br: { radius: 5 },
antiAlias: true
}
curvyCorners(settings, ".post");
}