Menu
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?
573
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
