Is there a setting for highcharts tooltips where you can set it to display on click versus hover?
I have seen a lot of people discussing the tooltip staying on click but then there is still the hover present. Is there a way to disable the hover and use only click?
There is not a setting for that in Highcharts currently.
There is a feature request for this functionality here: http://highcharts.uservoice.com/forums/55896-general/suggestions/2607304-allow-the-tooltip-to-appear-when-a-point-is-clicke
Feel free to add your votes and comments.
UPDATE:
I have started using the jquery UI dialog for this purpose.
I disable the tooltip in Highcharts, and add a click event to the point in the plotOptions.
In that click function I call an external function, sending it the point object, and build my tooltip within the dialog.
http://jqueryui.com/dialog/
http://api.highcharts.com/highcharts#plotOptions.series.point.events.click
You could also use Highslide for this purpose, and keep it all in the family.
http://highslide.com/
Working example:
http://jsfiddle.net/jlbriggs/LHZ3E/embedded/result/
Adding for those who has problems like me with useHTML: true and wants to display tooltip only on click and not on hover and wants to have only one tooltip on screen.
Here is a fiddle.
Related
I'm upgraded to Vaadin 23.3 Preview because of Tooltip component. Works and looks great. Only one question - I use the tooltip as a toggletip. I added an icon to my textfield and manually open tooltip by clicking it. In order to close the tooltip, I have to click the icon one more time. Is it possible somehow to close the tooltip by clicking the tooltip text also?
That's not supported, as the Tooltip feature is not intended to be used for anything interactive. As the docs say:
Tooltips only support plain text content. They aren’t focusable and
can’t contain interactive elements.
Due to technical (and especially accessibility) reasons, interactive popups like that need a different implementation. There are some vague plans to add such a feature to the Vaadin platform in the future, however.
One component in the Vaadin's Directory that can be considered better suited for the task is Popup.
I am building an app with Vaadin 14.4.8 and I have a question about the pie chart. When I am selecting a tile in the pie on mobile, the halo appears and stays visible. In the desktop variant the halo is only visible on mouse over.
I am looking for a way that the halo stays visible, when a tile is selected on mobile and desktop by the user and through a listener.
Can I set chart behavior always to mobile or is there another possibillity?
I did find a solution directly in highcharts but I couldn't apply this to the Vaadin charts -> Highcharts, set halo on select in pie chart
Thank you in advance your answers.
The effect you are seeing on mobile is still just the same hover effect like on desktop. On mobile, with touch events, there is no equivalent of a "mouse leave" event, so the slice will stay hovered after tapping on it, and will only disappear after tapping somewhere else.
However the charts have an actual selection mode, which you can enable by:
plotOptions.setAllowPointSelect(true);
See here for the plot options documentation.
Once that has been enabled, clicking on a slice will select it, which moves the slice slightly outside of the circle. See following example, where Neptune is selected:
I have been looking for something similar to the map at http://www.rottnestisland.com/. As you can see, you click on an icon then a tooltip with information comes up.
Searched for two days now for something similar but I only get the regular tooltips. Do I just edit the tooltip CSS and go from there or am I searching for the wrong thing? I just want to know if what I am looking for is indeed a tooltip or called something else?
Thanks for your help.
Instead using the concept of tool tip we can use simply show hide in a div. In your reference link also they have used opacity in css to show hide the div (Tooltip).
I have a questionnaire with buttons that show a tooltip on mouse hover and select on mouse click.
On mobile devices, ToolTip captures the first click to show the tool tip (equivalent of "hover" on computer) and the second click is used for button selection (equivalent of "click" on computer).
Now my question: how, on a mobile device, can I use the first click to both show the tooltip AND select the button ?
Is there a way I can e.g. propagate the event to make it act like on a computer ?
Or intercept the first event and trigger another event ?
Or should I act at the level of the button by catching the event and manually trigger tooltip showing ? (in which case I'll also need to figure out how to hide the tooltip when a button from another question is clicked).
Or perhaps JQuery-UI ToolTip is not adapted to my needs?
Thanks ahead for your views
LA
Finally I found an acceptable solution by manually hooking a click event to the buttons as follows:
$(".questionnaire_button").click(function () {
$(this).tooltip({
position: { my: "left+15 center", at: "center+20 center" }
});
$(this).tooltip("open");
})
I'm using the jQuery UI datepicker and the tooltip function from the same collection. Both work perfectly for my application. Except where they both try to work. When I hover on the icons for previous or next months, I get a tooltip popping up that says "Prev" or "Next". When I click on the previous-month icon the tooltip stays visible, completely covering the month and year headline. (On the next-month icon it stays visible but it doesn't interfere. Much.)
The function of these icons is absolutely clear without the tooltip, and badly broken with it, but I can't figure out a way to disable the title="Prev" and title="Next" code.
I actually don't need tooltips anywhere in the datepicker because I'm using it strictly to set a date rather than display events in the calendar.
The solution is to be more specific in the "tooltip" selector.
I changed from:
$(document).tooltip();
to:
$("span.ui-icon").tooltip();
And it work for me now.
After initializing my datepickers I use:
$('.ui-datepicker-trigger').prop('title','');
You can add option for datepicker():
$(".datepicker").datepicker({
hideIfNoPrevNext: true,
minDate: "-2Y"
});