How to localize the hover text in the modebar?

plotly.js
1

I have to localize the grid and want to define the hover text of the mode bar buttons by myself. How can I do that.
I tried to access the modeBarButtons without success.

Thank you!

1 Like
2

Hi,
with help of the dom inspector you can see, that the modebar-buttons have the class .modebar-btn.
So if you want to modify the tooltip of them, you could e.g. use jquery-selector $("#myDiv .modebar-btn") to get them and to modify that.
The relevant code is the following:

//get all modebar buttons via jquery selector
var modebarButtons = $("#myDiv .modebar-btn")

//modebar data-titles of some modebar-buttons
var modebarButtonDataTitles={
				zoomIn : "Zoom in",
				zoomOut : "Zoom out",
				zoomMode: "Zoom",
				panMode: "Pan",
				downloadAsPng: "Download plot as a png",
				autoscale: "Autoscale",
}

//iterate over all modebar buttons and do something do them depending on their data-title
$.each(modebarButtons,function(index, modebarButton){
	var dataTitle = modebarButton.attributes["data-title"].value;
  if(dataTitle == modebarButtonDataTitles.zoomIn){  
		modebarButton.attributes["data-title"].value="Zoom INTO the Plot!";
	}
  else if(dataTitle == modebarButtonDataTitles.zoomOut){
  	modebarButton.attributes["data-title"].value="Zoom OUT of the Plot!";
  }
  else{
  	//do something else to all other modebar buttons
  }
});

I created additionally a jsfiddle example so you can see that it work’s: https://jsfiddle.net/m2bdc9py/

hope it helps:-)

3

Sorry I don´t want to flame but I think this is a very bad solution for 2022.
(guess it was the only solution 2017)

Now it has translation mechanisms: