I have a jquery UI slider on a webpage I'm working on, but I'm looking to get a tooltip on the slider too. I've been through most of the questions here (searching) and didn't find what I was looking for or I couldn't understand the answer(s).
Here's a sample of what I'm looking for:
Sample UI Slider with tooltip
Here is my slider:
My slider with no tooltip yet
I just created a simple UI slider from the jquery website. Snap to increments. Ideally, whatever dollar amount the slider is on, I'd like the tooltip to display right above it. I'll tackle CSS code later for look n' feel.
and I can't post my actual code, because it has hyperlinks in it, and because I'm a newbie here, this website won't let me make a posting with more than 2 hyperlinks, which I've already used up to show you the sample and my slider.
I believe you are looking for this.
Basically, this tutorial shows how to style the slider and place a tooltip above the slider to get the value of the input.
Related
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 would like to use only easing.easeOutQuint and animate feature of jQuery UI. How can I get a smaller piece of code rather than the jquery-ui.js? I want to just put the code directly in my page.
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.
Is there a way to make a slider in jQuerymobile with two selection points, and a highlight inbetween?
I'm looking for something like this:
http://jqueryui.com/demos/slider/#range but for a mobile framework.
At the moment there doesn't seem to be a built in way to do so, however you might want to have a look at this SO question
jQuery Mobile Dual Range slider
Is there any Spin-box control for JQuery Mobile. I found nothing in Demo section. Which would be the best way to have one?
There is a slider that allows the user to choose a value from a range by swiping the slider:
http://jquerymobile.com/demos/1.0b1/docs/forms/forms-slider.html
I found a spinner plugin at http://dev.jtsage.com/jQM-Spinbox/ which is a basic spinner that just increases/decreases the value in the field. There are no min, max, or stepping options.