We Keep Coding

Show leaflet tooltip on hover only when popup is not being shown

I have a tooltip with a short text only description and a popup with a longer formatted description bound to a marker on a leaflet map.
The tooltip shows on hover and the popup shows when you click on the place marker. When the larger popup is visible there is no need to show the tooltip. Can I disable the tooltip when the popup is visible and how do I do this?
Here is the code I have so far:
var marker = L.marker(location);
marker.bindPopup("Long description with extra formatting ...");
marker.bindTooltip("Short description");

You can add custom handlers for the tooltip and popup. With the leaflet method isPopupOpen() which return true or false you can descide if you open the tooltip or not.
function customTip() {
this.unbindTooltip();
if(!this.isPopupOpen()) this.bindTooltip('Short description').openTooltip();
}
function customPop() {
this.unbindTooltip();
}
var marker = L.marker(location);
marker.bindPopup('Long description with extra formatting ...');
marker.on('mouseover', customTip);
marker.on('click', customPop);

I used the popupopen and popupclose events to manipulate the tooltip visibility.
This is a good generic solution that doesn't involve extending the standard classes and still respects all the standard configuration and options around popups and tooltips.
map.on('popupclose', function (e) {
// make the tooltip for this feature visible again
// but check first, not all features will have tooltips!
var tooltip = e.popup._source.getTooltip();
if (tooltip) tooltip.setOpacity(0.9);
});
map.on('popupopen', function (e) {
var tooltip = e.popup._source.getTooltip();
// not all features will have tooltips!
if (tooltip)
{
// close the open tooltip, if you have configured animations on the tooltip this looks snazzy
e.target.closeTooltip();
// use opacity to make the tooltip for this feature invisible while the popup is active.
e.popup._source.getTooltip().setOpacity(0);
}
});
NOTE: Took a bit of effort to track down the actual events this solution to a different issue pointed me in the right direction: https://stackoverflow.com/a/16707921/1690217
In my case I have bound the tooltip and the popup to have the same content, so I want to hide the tooltip to suppress the redundant information. In the following greenshot you can see the popup for one shape and the tooltip on hover over the other shapes, it looks messy when that tooltip tries to show under the existing popup when you hover over the feature that triggered the popup.

I use another solution in my project. I set the tooltip opacity acording to this.isPopupOpen(). For me this works good, because I don't want to always set the tooltip content again. To hide the tooltip instantly on the click event, set the opacity to 0 on click.
function showHideTooltip()
{
var mytooltip = this.getTooltip();
if(this.isPopupOpen())
{
// Popup is open, set opacity to 0 (invisible)
mytooltip.setOpacity(0.0);
}
else
{
// Popup is cosed, set opacity back to visible
mytooltip.setOpacity(0.9);
}
}
function clickHideTooltip()
{
var mytooltip = this.getTooltip();
mytooltip.setOpacity(0.0);
}
var marker = L.marker(location);
marker.bindPopup("Long description with extra formatting ...");
marker.bindTooltip("Short description");
marker.on('mouseover', showHideTooltip);
marker.on('click', clickHideTooltip);

You can use my solution to this problem:
marker.on('click', function () {
this.getTooltip().setOpacity(this.isPopupOpen() ? 0 : .9);
});
marker.getPopup().on('remove', function () {
this._source.getTooltip().setOpacity(0.9);
});

Pass information from 'inline' colorbox to parent page

This is more of a theoretical question about scope than anything too specific to my code but I'll give an example of what I'm trying to do anyway.
When a user selects something from a dropdown menu, colorbox overlays the screen and presents a hidden <div> on the opening page. No iframe is being used or no external html page being loaded. The <div> presented lives on the same page but is populated on the fly with a selection of images.
Colorbox presents the selection of images wrapped in <div>s. I want the user to be able to select an image and, depending on what they select, populate a form on the page underneath.
How can I get variables from the colorbox inline presentation to a function on the opening page?
I've tried a few things and looked at a few similar examples and nothing seems to work. The examples I've seen are from iframe loads not inline.
function presentDifferentPrintings(cardPresentInfo) {
// prevent submission until we're done here
allowSubmitField = document.querySelector('#allowSubmit');
allowSubmitField.value = 'false';
// clear current hidden overlay div
$( "div" ).remove( ".singleCardInOverlay" );
// iterate through each printing, get set names, multiverseIDs and release dates to present
var printingsNum = cardPresentInfo.printings.split("{|}");
printingsNum.reverse(); // we want to see the latest cards first
$.each(printingsNum, function(index, setCode) {
var setName = setNameCardIsFromField(setCode);
var thisMultiverseID = getMVIDfromSetCode(cardPresentInfo['name'], setCode);
var thisID = getIDfromSetCode(cardPresentInfo['name'], setCode);
// create HTML for each card presentation
var presentSingleCardHTML = "<div class='singleCardInOverlay' id='ovDiv"+thisID+"' onClick(fillInDetailsFromOverlay('"+thisID+"');) >";
presentSingleCardHTML += '<img id="overlayImage" src="<?=$localCardImagePresentFolder?>'+thisMultiverseID+'.jpg" />';
presentSingleCardHTML += '<p class="singleCardTextInOverlay">'+thisMultiverseID+' - '+setName+'</p>';
presentSingleCardHTML += '</div>';
// attach new div to hidden div if we have multiverseid
if (thisMultiverseID != '') {
$(presentSingleCardHTML).appendTo("#hiddenOverlayDiv");
}
});
$.colorbox({ inline:true, href:"#hiddenOverlayDiv", width:'80%', height:'80%', transition: "fade", opacity:0.85, returnFocus: true, trapFocus: true });
}
And here's a very simplified version of the function I'm trying to call that lives on the page that summoned the colorbox:
function fillInDetailsFromOverlay(thisID) {
alert('success');
}
Any ideas?

Solution! After taking a nice break and playing cards with my kid ........
The way I got this working was to call my colorbox with a function assigned to the onComplete event hook that is built in. Instead of using the javascript onClick thingo in the div tag, I'm now listening for a click on any of the images with the 'singleCardInOverlay' class and passing the id for that div (which corresponds to the image selected) to the function.
Amazing what taking a break can do for your coding. I hope this helps someone.
$.colorbox({
inline:true,
href:"#hiddenOverlayDiv",
width:'80%',
height:'80%',
transition: "fade",
opacity:0.85,
returnFocus: true,
onComplete: function() {
$(".singleCardInOverlay").click(function(){
fillInDetailsFromOverlay(this.id);
});
},
trapFocus: true
});

TinyMCE - How to add a button with a name

I know I can add buttons in TinyMCE 4 using addButton . But when I use addButton and enter a title for it, only an empty button is shown in the editor with a tooltip that contains the content of title. How do I add a title, that is actually shown in the menubar, like for the save button?

// Create and render a button to the body element
tinymce.ui.Factory.create({
type: 'button',
text: 'My button'
}).renderTo(document.body);

I found the solution, thanks to Eslam.
You actually just set the 'text' value of addButton:
$('#site_content').tinymce({
setup : function(ed) {
ed.addButton('name', {
text : 'TEXT',
onclick : function() {
}
});
}
});
The documentation of TinyMCE is just awful at some parts, if you'd ask me

Add dojo tooltip dialog to each table cell

I'm tyring to add a dojo tooltip dialog to every table cell so that when i hover over each cell the content. I'm using the tooltip dialog because there is clickable content on it.
I know this is possible using the tooltip control as below
require(["dijit/Tooltip", "dojo/query!css2", "dojo/domReady!"], function(Tooltip){
new Tooltip({
connectId: "myTable",
selector: "tr",
getContent: function(matchedNode){
return matchedNode.getAttribute("tooltipText");
}
});
});
I can't find anyway to do similar with the tooltip dialog, any suggestions?

dijit/TooltipDialog looks like a Tooltip, but it's really a dressed-up dialog. You'll need to use dijit/popup manually to do what you want. Fortunately, there's a great example of this in the documentation.
I've made a fiddle that takes that demo and tweaks it to your situation with a table. Making a different tooltip per cell shouldn't be too far of a leap from here, if that's your desire. You could use dojo/query to get all the cells and attach a new TooltipDialog to each one, for instance.
The relevant parts of that code follow.
Open the dialog when hovering:
on(dom.byId('table1'), 'mouseover', function(){
popup.open({
popup: myTooltipDialog,
around: dom.byId('table1')
});
});
Close the dialog when leaving:
var myTooltipDialog = new TooltipDialog({
// ...
onMouseLeave: function(){
popup.close(myTooltipDialog);
}
});

How do you dynamically add a button/plugin to TinyMCE?

I have a TinyMCE editor in my page. I would like to add/remove buttons/plugins from the toolbar based on things happening else where in the page. I am looking for a solution that avoids destroying and recreating the editor. Is there a tinyMCE command to do this? Something like
tinyMCE.execCommand("mceInsertPlugin", pluginName);

You cannot load plugins without reinitializing the editor.
But with buttons it is possible:
Create button on the fly:
ed.addButton('example', {
title : 'example.desc',
image : '../jscripts/tiny_mce/plugins/example/img/example.gif',
onclick : function() {
ed.windowManager.alert('Hello world!! Selection: ' + ed.selection.getContent({format : 'text'}));
}
});
Removal:
$('.mce_example').parent('td').remove();