Solution with no JavaScript This uses CSS pseudo hover to set the display of the hidden element. The display none needs to be in the style and not on the element so it can be overwritten in the hover. .couponcode:hover .coupontooltip { /* NEW */ display: block; } .coupontooltip { display: none; /* NEW */ … Read more
You can use moment.js to get the values formatted, but Highcharts has it’s own date formatting functionality which would be more idiomatic with Highcharts. It can be attached onto the tooltip option in the highcharts constructor like so: tooltip: { formatter: function() { return ‘<b>’ + this.series.name +'</b><br/>’ + Highcharts.dateFormat(‘%e – %b – %Y’, new … Read more
In your particular case you can simply use d to position the tooltip, i.e. tooltip.html(d) .style(“left”, d + “px”) .style(“top”, d + “px”); To make this a bit more general, you can select the element that is being moused over and get its coordinates to position the tooltip, i.e. tooltip.html(d) .style(“left”, d3.select(this).attr(“cx”) + “px”) .style(“top”, … Read more
You can use this to change tooltip-arrow color .tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-bottom-color: #000000; /* black */ border-width: 0 5px 5px; }
I was having the same problem. I found this reference useful. The tooltip for Sales would use the generic @height, e.g.: hover.tooltips = [(‘Sales’, ‘@height’)] Similarly, replacing @height with @y would give you the total sales for each year. I haven’t figured out how to use the tooltip to access the stacked categories or how … Read more
Using jqueryui: HTML: <div id=”tt” >Test</div> JS: $(‘#tt’).on({ “click”: function() { $(this).tooltip({ items: “#tt”, content: “Displaying on click”}); $(this).tooltip(“open”); }, “mouseout”: function() { $(this).tooltip(“disable”); } }); You can check it using http://jsfiddle.net/adamovic/A44EB/ Thanks Piradian for helping improve the code.
I had a similar problem today. Sometimes, the tooltip would not show. I had one ToolTip control for all the controls in my form. I also had a MouseEnter event on all the controls added automatically, so I modified the MouseEnter event to do: _tooltip.Active = false; _tooltip.Active = true; It fixed the bug, but … Read more
you can show the tooltip only once when mouse hits the disbled control and then hide it when mouse leaves it. Pls, take a look at the code below, it should be showing a tooltip message for all the disabled controls on the form private ToolTip _toolTip = new ToolTip(); private Control _currentToolTipControl = null; … Read more
For those looking to apply a custom class to the new tooltip widget (jQuery UI 1.9.1), extraClass doesn’t seem to work anymore, but there is a new option called tooltipClass. $(‘.selector’).tooltip({ tooltipClass: “your_class-Name”, }); In order to address potential conflicts with jQuery’s css, you may need to add !important to the end of the lines … Read more