6

Has anybody found a way to add tooltips to the dat.gui entries?

It seems there is no class assigned to them so how can I select them?

gaitat
  • 12,449
  • 4
  • 52
  • 76

1 Answers1

6

You will need to add this capability to dat.GUI yourself. Here are some guidelines and an example solution.

Entries are represented with classes that are inherited from the Controller class. Each controller has a private member __li, that represents its <li> element in the gui. You can extend the Controller prototype and add a title function, that will add, update or remove the __li's title attribute.

Here is the snippet:

/* dat.GUI copies the prototype of superclass Controller to all other controllers, so it is not enough to add it only to 
the super class as the reference is not maintained */
var eachController = function(fnc) {
  for (var controllerName in dat.controllers) {
    if (dat.controllers.hasOwnProperty(controllerName)) {
      fnc(dat.controllers[controllerName]);
    }
  }
}

var setTitle = function(v) {
  // __li is the root dom element of each controller
  if (v) {
    this.__li.setAttribute('title', v);
  } else {
    this.__li.removeAttribute('title')
  }
  return this;
};

eachController(function(controller) {
  if (!controller.prototype.hasOwnProperty('title')) {
    controller.prototype.title = setTitle;
  }
});


// demo
var Dummy = function() {
  this.foo = 12
};
Dummy.prototype.bar = function() {
  console.log('1');
};

var gui = new dat.GUI();
var d = new Dummy();
gui.add(d, 'foo').name('Foo').title('Foo\'s title');
gui.add(d, 'bar', 1, 13, 1).name('Bar').title('Bar\'s title');
<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
</head>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
</body>

</html>
greginvm
  • 245
  • 2
  • 5
  • sorry it has taken me so long. busy with other projects. where should I add this code. in dat.gui source code or in my code? – gaitat Jun 10 '15 at 16:47
  • This code snippet is supposed to be used with your own code without changes to the dat.gui library. It could be solved more elegantly if done directly in the dat.gui's source. – greginvm Jun 11 '15 at 10:58
  • I added a change request at https://github.com/dataarts/dat.gui/issues/251 – Wolfgang Fahl Aug 17 '19 at 08:27