I surprisingly have not found anything on this issue while googling around for it. My use case seems fairly straight forward, the kendo ui tooltip overflows the window if it should go out of the window.
So, I want to keep the tooltips to the right or left of my elements. I have the tooltip set up like this:
var clickTooltip = $('#some-element').kendoTooltip({
filter: '.tooltip-eles',
position: 'left',
width: 250,
showOn: 'click',
autoHide: false,
content: kendo.template($('#tooltipTemplate').html()),
show: function(e) {
console.log(e);
var tooltipElement = e.sender.popup.element;
var tooltipPosition = isTooltipInBounds(tooltipElement);
e.sender.setOptions({position: tooltipPosition});
}
}).data('kendoTooltip');
Where isTooltipInBounds checks if the tooltip goes off the right or left side of the window, and returns the opposite direction, which I want the tooltip to be on to avoid any overflow.
So, for the case where the tooltip extends off the right side of the window, it returns left. So I setOptions and put position as 'left', but the tooltip does not change positions.
I am not sure of how I may be able to dynamically change the position setting of the tooltip to the side of my element that has space for it. Does anyone know how you might do this?
I'm hesitant to post this answer as it is a bit hack-y and uses bits of non-public-api/private code of the Tooltip widget, and requires polishing to be remotely production, but...
The problem with your current code is that the show event of the Tooltip fires after the Tooltip is already shown, so attempting to change the position here is too late.
There is no built-in beforeShow event on the Tooltip.
But, internally the Tooltip is using a Popup widget(Popup widget documentation).
The Popup widget has an open event that does fire before the Popup is shown, which is also cancel-able FYI.
So, if you can attach a handler to the open event of the Tooltip's internal Popup, you can make changes to the Popup before it is shown.
Unfortunately, the internal Popup widget of the Tooltip is not constructed until the Tooltip is shown for the first time, which makes it difficult to attach the handler when you setting up Your Tooltip.
Initialize the Tooltip:
var tooltip = $('#some-element').kendoTooltip({
position: 'left',
width: 250,
showOn: 'click',
autoHide: false,
content: "It's the tooltip!",
}).data('kendoTooltip');
HACK #1, force the creation of the internal Popup widget so that we can attach our handler to its open event:
tooltip._initPopup();
This uses a "private" method of the Tooltip that it calls the first time the Tooltip is shown and sets up its popup member.
Attach our handler:
tooltip.popup.bind("open", function (e) {
// Figure out position...
var tooltipPosition = isTooltipInBounds();
console.log(tooltipPosition);
// Map tooltip position to Popup position using mapping defined inside Tooltip widget code...
var popupPosition = mapTooltipPostionToPopPosition(tooltipPosition);
// Set position of Popup before it is shown.
e.sender.setOptions(popupPosition);
});
This is doing a few things:
Performing your logic for determining the position of the Tooltip, which I have faked with a random number generator for fun. You will need to somehow get the tooltip target in here to perform your actual logic.
function isTooltipInBounds() {
var tooltipPosition;
switch (Math.floor(Math.random() * 2) + 1) {
case 1:
tooltipPosition = "left";
break;
case 2:
tooltipPosition = "right";
break;
};
return tooltipPosition;
}
HACK #2: Mapping the Tooltip position to Popup position. Internally, the Tooltip does this during _initPopup() using a mapping array that is defines privately(which I have copied):
function mapTooltipPostionToPopPosition(tooltipPosition) {
var POSITIONS = {
bottom: {
origin: 'bottom center',
position: 'top center'
},
top: {
origin: 'top center',
position: 'bottom center'
},
left: {
origin: 'center left',
position: 'center right',
collision: 'fit flip'
},
right: {
origin: 'center right',
position: 'center left',
collision: 'fit flip'
},
center: {
position: 'center center',
origin: 'center center'
}
};
return POSITIONS[tooltipPosition];
}
Passes the Popup position config to the Popup using setOptions.
See it in action(Kendo Dojo)
Since this is using a couple of internal/private structures from inside the Tooltip widget source code, it is fragile and subject to breaking if Kendo changes.
It also requires some CSS, etc to make it look nicer and whatnot.
If this was me looking for this functionality, I would submit Kendo support ticket asking if it was possible as they can be super helpful, even if we are trying to do unsupported things....but I'm a paying customer so that may not be possible for you.
Related
I'm trying to develop a very compact chart that displays both buttons and inputSelect from rangeSelector on the same line. Also I have a controller to show/hide stocktools gui interface (this is the source of bug).
Showing gui generates an animation that moves buttons to the right, since the distance between both elements are greater than the responsive rule condition (I suppose) they stay on the same line, but when I click to hide the gui an animation triggers and forces inputSelect to break a line.
I have tried to use a parameter chart:{animation:false}, but for some reason I get the inverse problem. When I click to show the gui interface inputSelect breaks a line and when I hide it back it goes back for the same line.
Here is a live demo.
I was wondering if I could acces that responsive rule and disable it, but I couldn't find it anywhere in API docs. Also I have tried to use default parameters from rangeSelector API but it seems they can't help with that gui animation being triggered.
Any solution for that outcome is valid, I just think this is viable one.
Update
I found this forum thread https://www.highcharts.com/forum/viewtopic.php?t=41142. This is a viable workaround, I tried to implement it to make both input goes to the right and buttons to the left, this way it would be harder for their condition of break line to be met.
Here is the workaround:
chart: {
events: {
load: function(){
let marginRight;
let marginLeft;
let marginLeft;
let this = chart;
marginRight = chart.marginRight - chart.spacing[1];
marginLeft = chart.plotLeft + chart.spacing[3];
chart.update({
rangeSelector: {
inputPosition: {
align: "right",
x: marginRight,
},
buttonPosition: {
align: "left",
x: marginLeft,
}
}
});
}
},
It only worked for the marginRight for some reason chart object doesn't have marginLeft property, I was wondering if is there any other way to calculate axis title and labels width to pass as this x offset.
my question is somewhat related to this question: jQuery UI Tooltip: Manipulate DOM position
In my case I'm using Leaflet and the HTML5 Fullscreen API to make it possible to display the map in fullscreen. I also use jQueryUI tooltip to be able to display some information when hovering over certain elements on the map. Unfortunately the tooltips are covered by the map when in fullscreen mode. So they are present but "under" the map.
As far as I understood from the fullscreen spec a new layer is added when using fullscreen, which is above every other layer. So naturally the tooltip wouldn't be visible since jQueryUI appends the tooltip at the end of the body and the fullscreen is applied to the map which is in a div in the body.
I need these tooltips to be visible in fullscreen mode. So I suppose I'll need to append the tooltip to the div of the map instead. So the fullscreen mode also consideres the tooltip to be in the top layer.
Back to the first link: It says it's not possible to change the DOM position of the tooltip.
Can someone help as to how I can proceed on this issue? Or is it just not possible? Any tips appreciated.
Here is an example: https://jsfiddle.net/7Lturfv2/
(from the Javascript)
var map = L.map('map', {
fullscreenControl: true,
fullscreenControlOptions: {
position: 'topleft'
}
}).setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
maxZoom: 18
}).addTo(map);
$(document).tooltip();
The control elements have their tooltips which are displayed when hovered in the "small" version of the map. If switched to fullscreen (the blank control button) the tooltips aren't displayed anymore.
Without a code example, it's not clear what may be happening.
At least with jQuery UI Modal, it does work as expected.
https://jsfiddle.net/Twisty/x7wc51qk/
JavaScript
$(function() {
$(document).tooltip();
$(".dialog").dialog({
autoOpen: false,
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Delete all items": function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$("#show-diag-btn").click(function() {
$(".dialog").dialog("open");
})
});
Example is built from https://jqueryui.com/tooltip/ and https://jqueryui.com/dialog/#modal-confirmation
Update
Your fiddle was configured incorrectly. I forked it and updated the resources properly:
https://jsfiddle.net/Twisty/hv7ak1rb/
Tooltips work as expected after the update. I found jQuery UI 1.9.0 CSS in use with jQuery UI 1.12.4. Updated this to the proper CSS.
Make sure your HTML is loading the resources properly and in the right order.
That should help.
We are using jspanels in our project as tool bar and whenever we click toolicons,jspanels will come as a popup and will display controls like textboxes for inputting data and gridview for displaying data.In normal way whenever we enter data in textboxes,after saving data it will be displayed in gridview.Jspanel will be adjusted to accommodate gridview.Now the problem i am facing is, i am minimizing jspanel by using jspanel.minimize() for certain times after that i will use jspanel.normalize() in order to move to the previous position.After that when ever i display results in gridview jspanel is not adjusting its size rather gridview is going inside jspanel, and i have to drag the corner of jspanel in order to display gridview.How can i avoid this issue rather dragging the panel.Here is the code i used for jspanel
var jteamNetworkPanel = null;
function searchByPanel() {
document.getElementById("divtDetails").style.visibility = "";
var content = document.getElementById("divtDetails").outerHTML;
$(document).ready(function () {
jteamNetworkPanel = $.jsPanel({
draggable: {
containment: "#tDiv"
},
selector: '#tDiv',
content: content,
size: { width: 'auto', height: 'auto' },
title: "Test",
position: { top: 50, left: "center" },
theme: 'warning'
});
});
}
Meanwhile jsPanel version 3 is released and I would suggest switching to version 3 for at least two reasons concerning your issue:
minimize() works different and has no more negative side effects I
know of
using "auto" with panel size is also improved and works a lot better
But v3 doesn't work with browsers older than IE11 and you need to check the docs since some options and methods are renamed.
http://jspanel.de/
I am using qTip 2.0.1 for displaying tooltips.
I make the tooltip show up in the bottom right of a link. The issue is that when the link is close to the right side of the browser, the tooltip box looks squeezed and ugly.
Can I configure qTip to make it auto-adjust its tooltip position to bottom-left?
You can use the collision detection as demonstrated on their demo:
position: {
at: $('#at').val(),
my: $('#my').val(),
viewport: $(window),
adjust: {
method: [your method]
}
},
...
Documentation
I am trying to programmatically create an AccordionContainer within a BorderContainer. I am able to get the accordion container to show up, however, it appears that it incorrectly computes it's initial size. When the screen draws, the second accordion panel is off the bottom of the screen. If you resize the screen, or press the 'Resize' button on the page, everything fixes itself. It's the strangest thing.
Here is the offending code:
// Create outer div
var node = dojo.byId('columnLayoutDiv');
var bc = new dijit.layout.BorderContainer({id:'brdr' ,design:'sidebar', style:'border: 0px; height: 400px;' });
node.appendChild(bc.domNode);
var widget1 = new dijit.layout.ContentPane({id: "center", region: "center", style:"padding: 0px;"});
widget1.attr('content', 'Left Pane')
bc.addChild(widget1);
var widget2 = new dijit.layout.ContentPane({id: "right", region: "right", style:"padding: 0px;"});
widget2.attr('content', 'Right Pane');
bc.addChild(widget2);
bc.startup();
bc.layout();
// Create the accordion and add it to the container
var resourcesAccordion = new dijit.layout.AccordionContainer({id:'accordionCtr'});
bc.getChildren()[0].attr('content', resourcesAccordion);
resourcesAccordion.startup();
// Create Accordion Panes and add them
var linksPane = new dijit.layout.ContentPane({
title: "Accordion 1",
style: "padding:0px; margin:0px;",
content: "Hello there!<br/>Hello there!<br/>Hello there!<br/>Hello there!<br/>"
});
var experiencePane = new dijit.layout.ContentPane({
title: "Accordion 2",
style: "padding:0px; margin:0px;",
content: "World<br/>World<br/>World<br/>World<br/>World<br/>World<br/>World<br/>"
});
resourcesAccordion.addChild(linksPane);
resourcesAccordion.addChild(experiencePane);
resourcesAccordion.layout();
bc.layout();
You can see a sample page that I created here: http://www.quimbik.com/sample/accordion.html
Any help would be greatly appreciated!
First off, the way BorderContainer is specified to work, you're supposed to declare height and width on the border container, then width (only) on all of your left/right regions and height (only) on your top and bottom regions. Center should not have any dimensions specified, which is correct in the example above. Your right region does not have a width in its style declaration, so the behavior in that case is unspecified. Try putting in a total width on 'brdr' and a width on your "right" region.
Also, you should be able to just plop your AccordionContainer directly in as your 'right' part of the border container, without the extra contentpane. Just put the region:'right' attribute on AccordionContainer and add it to the bordercontainer instead of the contentpane, or replace the contentpane if for some reason your app is written such that it needs to swap in the content later on.
HTH