We Keep Coding

Issue with Leaflet Pop-up Box - Small tag on corner of box. Is this a glitch of some kind?

I set up a leaflet map recently with tool tips that pop up on click. I thought everything was working perfectly until someone pointed out that each pop up box has this weird tag in the bottom right hand corner (see image below).
Any idea what could be causing this?
Here's the code for the popup:
function popUp (feature, layer) {
layer.bindPopup("<h1 class='city_infoheader'>" + feature.properties.city + " </h1><p>PM2.5 Attributable COPD Deaths: "+Math.round(feature.properties.copd) + "</p>");
layer.setIcon(circle);
};
function PoppopUp (feature, layer) {
layer.bindPopup("<h1 class='infoheader'>"+feature.properties.admin+" </h1><p>Country Population: "+feature.properties.pop_est+"</p>");
};
var pmDeaths = new L.geoJson(pmDeaths,{
onEachFeature: popUp,
}).addTo(mymap);
var countryPop = new L.geoJson(countryPop,{
style:countryColor,
onEachFeature: PoppopUp,
}).addTo(mymap);

There is sth wrong with the .leaflet-popup-tip-container.
It is the arrow below the popup that indicates the marker once you clicked it.
It has been distorted for some reason. Best quick solution would be to set the css class selector to:
.leaflet-popup-tip-container {
display: none;
}

I had this same problem. If you are including leaflet.css in addition to a library that already contains leaflet (e.g., mapbox), then there may be duplication/conflict of style definitions that will cause this problem with the popup tips. The solution is to remove leaflet.css from your build.

Dynamically adjusting Kendo UI tooltip position?

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.

Using flickity to resize as tabs

So I have a project now that is basically defusing bugs and this one in particular is a very annoying case. Flickity is supposed to be "resizing" a specific elements within <div> and working as tabs in the bottom to scroll to the specific informational element. However, all the text is just mashing together.
.
I have figured out, though, when you resize the browser, it works correctly and puts everything in its place by showing one <div> at a time and using buttons at the bottom to switch between <div>.
Here is the flickity part of the jQuery:
modalPopup(e, function() {
if ($(".key .active").not("#resetFilters").length) {
$(".button-group").find($(".key .active").data("filter"));
}
else {
$('.button-group li:first-child').addClass('is-selected');
}
$('.button-group').on( 'click', 'li', function() {
var index = $(this).index();
$(this).addClass('is-selected').siblings('.is-selected').removeClass('is-selected');
gallery.flickity( 'select', index );
});
var gallery = $('.chapters').flickity({
// options
//imagesLoaded: true,
//percentPosition: false,
cellAlign: 'center',
contain: true,
prevNextButtons: false,
pageDots: false,
resize: true
});
});
Where modalPopup() is a function that loads in the information.
Any help or suggestions, are highly appreciated!

I have figured out the issue. The issue is that the width of the element I was using flickity on was at 0px width initially using CCS transitions. Flickity thought the width of the parent element was at 0px and therefore didn't expand out its width elements.
So if you use CSS transitions with flickity resize, make sure you have a width defined.

Manually position an opentip tooltip in combination with Kinetic.js

I'm making a web application that uses Kinetic.js for some fancy
graphical functions, and I want to show a tooltip with some information about each element when the users hovers over it.
I've already figured out how to invoke a function on hover with Kinetic.js:
myKineticObject.on("mousemove", function() {
// Change content of tooltip depending on myKineticObject
// Set position of tooltip to cursor position
// Show tooltip
});
myKineticObject.on("mouseout", function() {
// Hide tooltip
}
I've decided to use the seemingly nice Opentip to show the tooltip.
The only problem is that Kinetic.js doesn't create any usable DOM elements to use as a target for opentip.
This is (roughly) what my HTML looks like:
<html>
<head><!-- Styles --></head>
<body>
<div id="container">
<canvas class = "kineticjs-buffer-layer">
<canvas class = "kineticjs-path-layer">
<canvas class = "myLayer1">
<canvas class = "myLayer2">
<!-- ... more layers -->
</div>
<!-- Scripts -->
</body>
</html>
Important to know is that these canvas elements all have the same width and height and stack on eachother. So they're unusable as targets.
So instead of using a DOM element to use as the target for my tooltip, I need to
manually show/hide and position the tooltip.
I've figured out how to do the showing and hiding like this:
var tooltip = new Opentip(
"div#container", //target element
"DummyContent", // will be replaced
"My Title", // title
{
showOn: null, // I'll manually manage the showOn effect
});
I now do the following:
myKineticObject.on("mousemove", function() {
tooltip.show();
});
myKineticObject.on("mouseout", function() {
tooltip.hide();
}
The only problem is that it just shows up at the top left of the page, and I can't find anything in the docs on how to position this thing manually.
Suggestions or ideas welcome. I'm also open to using a different tooltip library, if necessary.
Thanks!

It appears (with no knowledge of Opentip, besides a quick look at the docs) that you can set 'fixed' to true in the config. Since the target is null, the docs suggest fixed=true should make the tooltip appear at the mouse position, but not follow it once the mouse is moved around.
How does that sound?

I managed to solve the problem like this, for those of you who are looking for a solution too:
group.on("mousemove", function(event) {
tooltip.content = //change content
tooltip.show();
$("#opentip-1").offset({ left: event.offsetX, top: event.offsetY });
});

jQuery qTip - link to a hidden div from inside a tooltip

I am trying to place a link inside a tooltip (qTip) that when clicked shows the content of a hidden div inside a lightbox (nyroModal). Regular anchor tag not in a tooltip links to the div opening content in a lightbox successfully.
Code: http://jsbin.com/omafe/2/
Might need to copy code to notepad, save as html and open the file. (jsbin not loading external js plugin files)
Any help would be greatly appreciated. Thanks.

It appears that qTip is storing a copy of 'div.tipcontent' in memory (a variable).
I discovered this by removing the class "hidden" from the div. When you do this, you'll see that you have two divs. One still on the page and another used by qTip from memory.
As a solution, you may have to modify qTip to apply $('a').nyroModal(); to the link nodes it renders from memory.
EDIT
To add the lightbox effect to your qtip links, modify your qtip initializer as follows:
$('div.tooltip').qtip({
content: $('div.tipcontent').html(),
position: {
corner: {
target: 'topRight',
tooltip: 'bottomRight'
}
},
style: {
width: 150,
padding: 10,
background: 'silver',
color: 'black',
tip: 'bottomMiddle',
},
hide: {
fixed: true
},
api: {
onShow: function() { $('a').nyroModal(); }
}
});
Please note the api call to onShow. This will re-apply the nyroModal to all the links on the page thus covering the dynamically generated content from qtip. There's probably a more efficient way to narrow down the jQuery selector to the specific link generated by qtip, but this should get you started at least.