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);
}
});
Related
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);
});
I am extending a cloud-hosted LMS with javascript. Therefore, we can add javascript to the page, but cannot modify the vendor javascript for different components.
The LMS uses tinyMCE frequently. The goal is to add a new button on to the toolbar of each tinyMCE editor.
The problem is that since the tinyMCE modules are initialized in the vendor's untouchable code, we cannot modify the init() call. Therefore, we cannot add any text on to the "toolbar" property of the init() object.
So I accomplished this in a moderately hacky way:
tinyMCE.on('AddEditor', function(e){
e.editor.on('init', function(){
tinyMCE.ui.Factory.create({
type: 'button',
icon: 'icon'
}).on('click', function(){
// button pressing logic
})
.renderTo($(e.editor.editorContainer).find('.mce-container-body .mce-toolbar:last .mce-btn-group > div')[0])
});
});
So this works, but needless to say I am not totally comfortable having to look for such a specific location in the DOM like that to insert the button. Although this works, I do not believe it was the creator's intention for it to be used like this.
Is there a proper way to add the button to a toolbar, after initialization, if we cannot modify the initialization code?
I found a more elegant solution, but it still feels a bit like a hack. Here is what I got:
// get an instance of the editor
var editor=tinymce.activeEditor; //or tinymce.editors[0], or loop, whatever
//add a button to the editor buttons
editor.addButton('mysecondbutton', {
text: 'My second button',
icon: false,
onclick: function () {
editor.insertContent(' <b>It\'s my second button!</b> ');
}
});
//the button now becomes
var button=editor.buttons['mysecondbutton'];
//find the buttongroup in the toolbar found in the panel of the theme
var bg=editor.theme.panel.find('toolbar buttongroup')[0];
//without this, the buttons look weird after that
bg._lastRepaintRect=bg._layoutRect;
//append the button to the group
bg.append(button);
I feel like there should be something better than this, but I didn't find it.
Other notes:
the ugly _lastRepaintRect is needed because of the repaint
method, which makes the buttons look ugly regardless if you add new
controls or not
looked in the code, there is no way of adding new controls to the
toolbar without repainting and there is no way to get around it
without the ugly hack
append(b) is equivalent to add(b).renderNew()
you can use the following code to add the button without the hack, but you are shortcircuiting a lot of other stuff:
Code:
bg.add(button);
var buttonElement=bg.items().filter(function(i) { return i.settings.text==button.text; })[0];
var bgElement=bg.getEl('body');
buttonElement.renderTo(bgElement);
When using tinyMCE in a jqueryUI modal dialog, I can't use the hyperlink or 'insert image' features.
Basically, after lots of searching, I've found this:
http://www.tinymce.com/develop/bugtracker_view.php?id=5917
The weird thing is that to me it seams less of a tinyMCE issue and more of a jqueryUI issue since the problem is not present when jqueryUI's modal property is set to false.
With a richer form I saw that what happens is that whenever the tinyMCE loses focus, the first element in the form gets focus even if it's not the one focused / clicked.
Does some JavaScript guru have any idea how I might be able to keep the dialog modal and make tinyMCE work?
This fixed it for me when overriding _allowInteraction would not:
$(document).on('focusin', function(e) {
if ($(event.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});
I can't really take credit for it. I got it from this thread on the TinyMCE forums.
(They have moved their bugtracker to github. tinymce/issues/703 is the corresponding github issue.)
It seems there are no propper solution for this issue yet. This is kind of a hack but it really worked for me.
Every time you open the Dialog remove the text area and re add it like following,
var myDialog = $('#myDialog');
var myTextarea = myDialog.find('textarea');
var clonedTextArea = myTextarea.clone(); // create a copy before deleting from the DOM
var myTextAreaParent = myTextarea.parent(); // get the parent to add the created copy later
myTextarea.remove(); // remove the textarea
myDialog.find('.mce-container').remove(); // remove existing mce control if exists
myTextAreaParent.append(clonedTextArea); // re-add the copy
myDialog.dialog({
open: function(e1,e2){
setTimeout(function () {
// Add your tinymce creation code here
},50);
}
});
myDialog.dialog('open');
This seems to fix it for me, or at least work around it (put it somewhere in your $(document).ready()):
$.widget('ui.dialog', $.ui.dialog, {
_allowInteraction: function(event) {
return ($('.mce-panel:visible').length > 0);
}
});
I have a grid of large images for products. I'm looking to have a tooltip appear when you rollover the image. Though the tooltip will need to stay visible because there will be content and links inside of it. The tooltip will be positioned partly on top of its respective large product image. How do I determine to hide the tooltip when the user is not over the tooltip and the product image and show the tooltip when the user is over the tooltip and image?
Is there a jQuery plugin that handles this already?
Any help is appreciated! Thanks!
Hey I had an issue like this once. Though not exactly what you need this is what I ended up using.
var over_picker = false; //var to store state of over or not over
$('.list_picker').live('mouseover mouseout', function(event){
if (event.type == 'mouseover') {
over_picker=true;
console.log('inside');
}else{
over_picker=false;
console.log('outside');
}
});
$('body').live('click', function(){
if(! over_picker) $('.list_picker').hide();
});
I hope this can be of some help.
As already suggested in another thread, the native design of the tooltip rely on different assumptions, so the behaviour you need (a sticky tooltip that allows the user to click its content) is not officially supported.
Anyway looking at this link you can see it's possibile to achieve what you need using jQuery Tools:
http://jquerytools.org/demos/tooltip/any-html.html
Here is a standalone demo
http://jquerytools.org/demos/tooltip/any-html.htm
I'm testing a tooltip plugin and it will display a tooltip on mouseover. I'm trying to make the tooltip appear with an onclick, which I'm struggling and need your help.
I'm currently using a jquery piece so it will activate a modal window, thanks to #pointy, when the links within the tooltip is clicked. Can something like this be included with jQuery?
Demo: http://jsbin.com/eliwa3
Here is the page code that calls the functionality and tooltip content
<script>
dw_Tooltip.defaultProps = {
sticky: true,
klass: 'tooltip',
showCloseBox: true,
klass: 'tooltip2', // class to be used for tooltips
closeBoxImage: 'http://www.google.com/apps/images/x.png',
wrapFn: dw_Tooltip.wrapSticky
};
dw_Tooltip.on_show = function() {
$(".modalPageWide").colorbox({
width:"800px",height:"610px",opacity:0.6,iframe:true
})
};
dw_Tooltip.content_vars = {
tooltip_popup: {
content: 'Click a link to continue' +
'<ul><li>Link 1</li>' +
'<li>Link 2</li>' +
'<li>Link 3</li>' +
'<li>Link 4</li></ul>',
klass: 'tip'
}
}
</script>
As shown below, when a link includes a reserved class "showTip", it will activate the tooltip on mouseover. Also included is a compound class (of my choice) that will call the tooltip content
Example
Here's the logic that makes the tooltip work: Tooltip logic
basically all you would need to do it something like
$('a.tooltip_popup').click(function(e){
e.preventDefault();//so link doesn't take you to where ever it's supposed to
//code that brings the tooltip up
});