added description option to bindings.

[unstoppablecarl]

When I come back to old projects with Tweakpane I often wish I could leave some more detailed descriptions for the bindings. Tweakpane's compact UI is its key feature. This adds an optional description to each label without intruding on the UI at all.

The description is set to the label element title attribute allowing users to hover and get a tooltip of the description.

pane.addBinding(PARAMS, 'size', {
  label: 'Field radius',
  description: 'Force Field Radius in Meters',
});

label output

<div class="tp-lblv_l" title="Force Field Radius in Meters">Field radius</div>

this also allows some options for styling the labels.

.tp-lblv_l[title] {
  white-space: nowrap;
}

.tp-lblv_l[title]::after {
  content: ' ⓘ';
}

SEE:

• Feat: Description per input #559
• Is it possible to add tooltips to any control? #391