How to add tooltips to dat.gui

1.2k Views Asked by gaitat At 19 April 2025 at 08:38

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?

There are 1 best solutions below

greginvm On 10 April 2015 at 14:17 BEST ANSWER

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>

How to add tooltips to dat.gui

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in USER-INTERFACE

Related Questions in DAT.GUI

Trending Questions

Popular # Hahtags

Popular Questions