I need to show users different tooltips on mouse over event. Do we have something like that in Vaadin component library? If no, how to show tooltips in Vaadin23?
You could use also get the root element of whatever component you want the tooltip for and set the attribute:
Button button = new Button("Example");
button.getElement.setAttribute("title", "This is the tooltip");
There is an addon for tooltips https://vaadin.com/directory-beta/addon/tooltip
There is also ongoing work on adding tooltips to the core framework, you can follow the discussion here https://github.com/orgs/vaadin/discussions/3196
Does anyone know the setting in highcharts (I've looked through the API but I can't seem to find it - maybe looking in the wrong place?) where I can disable the chart's ability to resize when I click on a legend item?
http://api.highcharts.com/highcharts#legend
If there are two lines on the graph, and toggle off one of them on the legend, the graph resizes to show the one line full sized. I want to prevent this functionality.
There actually is a simple solution to this provided for by the API:
chart: {
ignoreHiddenSeries: false
}
I'm pretty sure this is the behavior you desire.
I have just migrated from TinyMCE3 to TinyMCE4 and I wonder how to remove the path in the status bar. But I want to keep my status bar in order to have the resize functionnality.
With TinyMCE3 we can do it with:
tinymce.init({
...
theme_advanced_path : false
});
How can I have the same result with TinyMCE4?
Thanks
In TinyMCE 4 you can remove just the path in the statusbar by setting the configuration elementpath to false, like this:
tinymce.init({ elementpath: false });
This works for me:
.mce-path {/* CSS */
display: none !important;
}
EDIT:
In TinyMCE4, I don't think there is an official way to do it by passing a parameter to tinymce.init(); to disable the path. You can pass statusbar: false but that will hide the path AND the resize icon, unfortunately!
The answer I gave by using CSS, hides the path but the resize icon stays there. But make sure you have the statusbar: true in the tinymce.init();
tinymce.init({
statusbar : false,
The CSS approach works, but is usually applied globally to each editor in the page. The old option of TinyMCE 3 could be applied individually for different editors.
I wanted to keep this flexibility and found the following solution:
a) Define a CSS rule like .myMceNoPath .mce-path{display:none;}
b) For an editor instance which should provide a resize handle without path display, define the following options:
resize: "both",
init_instance_callback : function (ed) {
ed.getContainer().className += " myMceNoPath";
}
This dynamically adds a class to the editor element, enabling us to apply the CSS only to the editors specifically marked this way.
tinyMCE.init({
menubar:false,
statusbar: false,
//etc
})
From: Remove menu and status bars in TinyMCE 4
Unfortunately this feature is deprecated in TinyMCE 4. But you always can block this visually by CSS. It must look something like this:
.mce-path {
display: none;
}
I am using tinyMCE v5. And the following works.
In order to hide the Path, pass "elementpath": false in init object and "statusbar": false to hide the full status bar. If you hide the whole status bar then you will also lose your ability to increase or decrease the height.
One quick solution in TinyMCE 4 is to set the path element's opacity to transparent:
tinymce.init({
...
init_instance_callback: function (editor) {
$(editor.getContainer()).find(".mce-path").css("opacity", "0");
}
});
This should hide the path text without otherwise affecting the status bar. I've found that disabling the status bar's visibility through either the init() function or CSS display property also results in a floating word count and resize icon overlapping the scrollbar.
Credit to immo and others for pointing out the callback and CSS concepts. I like this particular (jQuery) solution because it's self-contained and applies only to its parent editor, though variations are possible.
Setting theme_advanced_statusbar_location to empty string worked for me.
tinyMCE.init({
theme_advanced_statusbar_location : "",
})
Mine is based on the opacity concept from Dustin Carr above:
For TinyMCE 4, I located skin.min.css, searched mce-path-item and right after display:inline-block, I added opacity:0. So it finally is something like display:inline-block;opacity:0; *display...
It's just a quick trick, as Carr says: the element is still there when I click on it, it's just the standard user don't see it.
Hope it helps some one...
EDIT:The same for mce-divider ;)
Thanks to #Dustin Carr for his answer.
I've extended his answer a little bit , that's what i did , it works fine for me and when user hover cursor over the area of the path it doesn't display cursor at all (with opacity 0 it displays cursor over the path and path remains clickable) .
tinymce.init({
...
init_instance_callback: function (editor) {
$(editor.getContainer()).find(".mce-path").css("visibility", "hidden");
},
});
HTH
By default, the tooltip appears as soon as the cursor enters the chart. I would like to control when it first appears in one of two ways:
Wait for user to hover over (around) a data point on the chart.
This way the user can look at the entire chart without the
distraction of the tooltip.
mousedown - is there a way to disable the default mousedown function
and use it for displaying the tooltip instead? And because the
tooltip and crosshair seem to be joined, perhaps the same mousedown
event could fire the crosshair to appear?
number 2 would be best; any suggestions/solutions would be appreciated!
Number 2 is possible to achieve by:
disable default Highcharts tooltip
create point.click event handler
in above handler, create your own tooltip (it's simple div with some CSS)
make proper position for tooltip (accessed via this.point.plotX and this.point.plotY
I'm developing a chart that have 2 splines and 2 scatter. I use the default tooltip formatter to exhib a tooltip based in the spline data. But when I hover a scatter despite I hide the default tooltip, before show the scatter one, it appears to have triggered again.
How can I prevent the default tooltip to be triggered?
ps: im using Highcharts 3.0.1
EDITED: I tried "chartObj.tooltip.enabled = false" but it didn't work.
If you don't want to show the tooltip for a particular serie in the chart, see if setting
enableMouseTracking: false
on you desired serie's properties does it.
Hope this help.
I solved using this code:
chartObj.tooltip.options.enabled = false;
Setting to "false" when I hover and to "true" on mouseout.