I want to change the position of my tooltip from:
position: {
my: 'left top',
at: 'right center'
}
to (only for the mobile resolutions):
position: {
my: 'top center',
at: 'bottom center'
}
Related
I am trying to show a qtip when the user right-clicks on a node using the following code:
cy.on("cxttap", "node", function (evt) {
evt.cyTarget.qtip({
content: {
text: "test"
}
});
});
When I right-click a node no tooltip is shown, but as soon as I left-click on the same node then the tooltip shows.
I have made sure that cytoscape-qtip is working and I have not added any event handlers for the click or tap events.
qTip handles events itself, so you have to specify something like cxttap for the show event. If you want to write your own listeners, like you have above, then your call to qtip will need a call to the qtip API to manually show.
Set show property for right click
cy.elements().qtip({
content: '<p> [SUM Outgoing call :42, THUVAPPARA</p><button id="add-to-report" class="btn btn-success">Add to report</button><br><button class="btn btn-danger">Remove</button>',
show: { event: 'cxttap' },
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-bootstrap',
tip: {
width: 16,
height: 8
}
}
});
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.
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've got Uncaught ReferenceError: options is not defined.
Here is the code:
// Create the tooltips only when document ready
$(document).ready(function()
{
// MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
$('a').qtip({
content: {
title: {
text: 'text',
button: 'close'
},
text: 'asfaf'
},
hide: {
fixed: true,
delay: 300
},
position: {
my: 'left center',
at: 'right center',
target: 'event'
}
});
});
You can also visit http://jsfiddle.net/H4aTZ/2/ .
Apparently there is a problem regarding the title and position working together. Probably they are going to release a update soon.
Meanwhile, if you use nightly version it actually works :)
http://qtip2.com/v/nightly/
i make a map with this code
var map;
var myOptions = {
center: new google.maps.LatLng(-31.403759,-64.174232),
zoom: 12,
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
function iniciar() {
map = new google.maps.Map(document.getElementById("map"),myOptions);
}
function marcar(lat, lng) {
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'http://en.wikipedia.org/w/index.php?title=Uluru</a> (last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var location=new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: location,
map: maps
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
When I try to click on markers, they are decalibrated so that when I click on the center of a marker nothing happens. But a few centimeters down, a cursor appears like the marker is at that point.
So the map is not centered and the marker appears at the real coordinates, but I have to click 2 cm down away from the marker for the click on the marker...
Why is that?? Has anybody else had this happen??
the problem was the body... in my css i put
body{
zoom:0.9;
margin:0;
padding:0;
width:100%;
}
the zoom affects the google maps remove the zoom calibrate the marker.... thank you all!! i hope this problem solve any other similar problems
and sry for my bad english! ejejej