I'm trying to hide the tooltips in a line chart using chart.js.
I have tried this code, but they never hide.
Chart.defaults.global.tooltipenabled = false;
You can see all the code here of the chart:
https://jsfiddle.net/w6zs07xx/
Thanks!
To turn off for a specific chart instead of in global defaults use this in the options object. Using v2.5.0
options: {
tooltips: {
enabled: false
}
}
For v4.2.0
options: {
plugins: {
tooltip: {
enabled: false
}
}
}
Docs - https://www.chartjs.org/docs/latest/configuration/tooltip.html
For me showTooltips = false didn't work.
My solution was:
Chart.defaults.global.tooltips.enabled = false;
My version is:
2.1.4
You have the wrong property name. It should be
Chart.defaults.global.showTooltips = false;
Fiddle - https://jsfiddle.net/0tfvnmx1/
For v2.9.3:
options: {
tooltips: false
}
For 3+ the path is options.plugin.tooltip.enabled.
use the following option for hide the tooltip
tooltips :{
custom : function(tooltipModel)
{
tooltipModel.opacity = 0;
}
}
For me this worked.
Using Chart JS version 4.1.1
Chart.defaults.plugins.tooltip.enabled = false;
Related
The dev mode using npm run dev, the release mode using npm build
How could i know that it's currently built on dev mode or not in the code, for example:
<script>
import {onMount} from 'svelte';
onMount(function(){
if(DEVMODE) { // --> what's the correct one?
console.log('this is x.svelte');
}
})
</script>
If you are using sveltekit:
import { dev } from '$app/environment';
if (dev) {
//do in dev mode
}
Not sure about the correct method. I share what I did on my project.
in rollup.config.js
import replace from "#rollup/plugin-replace";
const production = !process.env.ROLLUP_WATCH;
inside plugins:[ ] block add this
replace({
isProduction: production,
}),
rollup.config.js will look like this.
},
plugins: [
replace({
isProduction: production,
}),
svelte({
Then use isProduction inside components .
if (!isProduction){ console.log('Developement Mode'); }
If you are using Svelte with Vite, you may use:
import.meta.env.DEV - true in development environment.
import.meta.env.PROD - true in production environment.
import.meta.env.MODE - name of the mode, if you need more control.
See Vite docs on Env variables
I solved this problem by checking the hostname the application is running on.
You can also use other forms like, port or even msm a localStore browser variable.
Note that I check if the application is running on the client side before using the 'window'
const isProduction = (): boolean => {
// Check if is client side
if (typeof window !== 'undefined' && window.document !== undefined) {
// check production hostname
if (window?.location.hostname !== undefined &&
window.location.hostname === 'YOUR_PRODUCTION_HOSTNAME') {
return true
} else {
return false
}
} else {
return false
}
}
When using Svelte (not svelte-kit), this worked for me inside svelte components:
<script>
let isProduction = import.meta.env.MODE === 'production';
if (!isProduction) {
console.log("Developement Mode");
} else {
console.log("Production Mode");
}
</script>
Thanks timdeschryver for the reference
I'm using sap.ui.comp.filterbar.FilterBar Control on a project. Everything works fine, except when I try to hide this Control.
var oFilterBar = new sap.ui.comp.filterbar.FilterBar("filterBar",{
reset: oController.handleOnReset,
search: oController.handleOnSearch,
showRestoreOnFB: true,
showClearOnFB: true,
showRestoreButton: true,
showClearButton: true,
...
});
oFilterBar.setVisible(false);
I'm getting the following error:
Uncaught TypeError: oFilterBar.setVisible is not a function
Since this property is being inherited from sap.ui.core.Control class, this should work and I think it has nothing to do with versions either (I'm using 1.24).
It has something to do with the version.
In SAPUI5 1.28[1] the property visible was moved to sap.ui.core.Control so any Control extending it would have this property as well.
If you are using an earlier version only Control that implement this property themselves can be made invisible.
You could however extend the control you are using to include this property:
sap.ui.comp.filterbar.FilterBar.extend("my.FilterBar", {
metadata: {
properties: {
visible: {
type: "boolean",
group: "Appearance"
}
}
},
renderer: function (oRm, oControl) {
if (oControl.getVisible()) {
sap.ui.comp.filterbar.FilterBarRenderer.render(oRm, oControl);
} else {
// Handle invisibility
}
}
});
Is there a way with the new Sass (3.3+) to disable the source maps by default? Right now I keep getting main.css.map (403 Forbidden) when I view inspector. It looks like it gets generated by default, but I would like to disable it.
Any ideas?
The grunt-contrib-sass module accepts a property in 'options' called 'sourcemap'.
grunt.initConfig({
sass: {
dist: {
files: {
'main.css': 'main.scss'
},
options: {
'sourcemap': 'none'
}
}
}
});
Documentation
Setting the value to "none" should prevent the creation of a sourcemap.
The 'sourcemap': 'none' option will no longer be valid as it was true for Ruby SASS which is no longer supported.
Use one of the following ways instead:
options: {
'no-source-map': ''
}
OR
options: {
sourceMap: false
}
I started using the gmap3 jQuery plugin today and I'm having issues with getting a list of markers.
As long as I add all the markers manually (with addMarker or addMarkers) all works well and the:
.gmap3({action:'get', name:'marker', all:true});
gives proper list of markers.
However, if i use the action:getRoute and the addDirectionsRenderer - the markers are not 'gettable' by code pasted above.
My code for showing the directions is below - it works and shows them properly on the map. Only issue is that I cannot get any markers out of it, so I can process them after creation.
var optionDirections = {
origin: startcoord,
destination: stopcoord,
waypoints: coordsAllGoogleStyle,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
....
.gmap3({
action:'getRoute',
options: optionDirections,
callback: function(results) {
if (!results) { alert('nodata'); return; }
$(this).gmap3(
{
action:'addDirectionsRenderer',
options:{
preserveViewport: false,
draggable: false,
directions:results
}
}
);
var res = $(this).gmap3({action:'get', name:'marker', all:true});
alert('Found: '+res.length+' markers');
}
});
to make things simple, I contacted the author of this api and it kind of not support it anymore because "now people use angular"
nice is'nt it...
I have few input and select controls in my form that each of them have a small question mark icon in front of them that will show a tool tip when mouse is over that gif with help of excellent jquery jquery.qtip-1.0.0-rc3.js(with jquery-1.3.2.min.js) plug-in like this :
$('#questionmark1').qtip({
content: 'sample help content'
, style: { name: 'sampleStyle' }
, position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }
});
I also want to show tool tip when ever that corresponding input field get focused and hide when get blurred . the following one do the trick but without showing the tool tip when mouse is over that gif
$('#questionmark1').qtip({
content: 'sample help content'
, style: { name: 'sampleStyle' }
, position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }
, show: { when: { target: $('#input1'), event: 'focus'} }
, hide: { when: { target: $('#input1'), event: 'blur'} }
});
but the problem is that something like does not work.
show: { when: { target: $('#input1'), event: 'focus'},
{ target: $('#questionmark1'), event: 'focus'} }
in short the preceding first 2 blocks of code works fine and i can add both to achieve my goal but i want do it the right way .
how can i target multiple targets'events for showing a single tool tip ?
You don't have to wire up all of the show/hide events inside of the call to qtip(). I'd define the mouseover event as the event that triggers the qtip by default:
$('#questionmark1').qtip({
content: {text:'sample help content', prerender: true}
, style: { name: 'sampleStyle' }
, position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }
, show: { when: 'mouseover' }
});
(Note the prerender option I added)
And then manually define event handlers for the input that you want to show the qtip for:
$("#input1").bind("focusin", function() {
$("#questionmark1").qtip("show");
}).bind("blur", function() {
$("#" + this.id + "-tip").qtip("hide");
});
See an example here: http://jsfiddle.net/andrewwhitaker/wCgAM/
The only odd thing is that you can make both tooltips show up by focusing the first input and then mousing over the second question mark. This is probably easy enough to fix though.
Hope that helps.