Tooltip enhancements (#861)

* Add fade prop to Tooltip

* Allow tooltips to be controlled by callbacks

* Add example to tooltip docs

Author: tcbegley

docs/components_page/components/tooltip.md

@@ -17,4 +17,10 @@ Use the `placement` argument to control the placement of the tooltip. The basic
 
 {{example:components/tooltip/placement.py:tooltips}}
 
+## Controlling the Tooltip with callbacks
+
+The tooltip's visibility can be controlled with callbacks much like a `Popover` component. Simply set the desired value of `is_open` in a callback. If you are manually controlling the value of `is_open`, you may wish to also set `trigger=None`. By default the `Tooltip` will show when the target element is hovered or focused.
+
+{{example:components/tooltip/tooltip_callback.py:tooltip}}
+
 {{apidoc:src/components/Tooltip.js}}

docs/components_page/components/tooltip/tooltip_callback.py

@@ -0,0 +1,33 @@
+import dash_bootstrap_components as dbc
+from dash import Input, Output, State, html
+
+tooltip = html.Div(
+    [
+        dbc.Button(
+            "Toggle",
+            id="toggle",
+            color="success",
+            className="me-4",
+            n_clicks=0,
+        ),
+        dbc.Button("Target", id="target", color="danger", n_clicks=0),
+        dbc.Tooltip(
+            "This is a tooltip",
+            id="tooltip",
+            is_open=False,
+            target="target",
+            trigger=None,
+        ),
+    ]
+)
+
+
+@app.callback(
+    Output("tooltip", "is_open"),
+    [Input("toggle", "n_clicks")],
+    [State("tooltip", "is_open")],
+)
+def toggle_tooltip(n, is_open):
+    if n:
+        return not is_open
+    return is_open

setup.cfg

@@ -51,6 +51,7 @@ exclude =
     docs/components_page/components/toast/auto_dismiss.py,
     docs/components_page/components/toast/icon_dismiss.py,
     docs/components_page/components/toast/position.py,
+    docs/components_page/components/tooltip/tooltip_callback.py,
 ignore = E203, W503
 
 [isort]

src/components/tooltip/Tooltip.js

@@ -16,10 +16,12 @@ const Tooltip = props => {
   const {
     id,
     children,
+    is_open,
     loading_state,
     className,
     class_name,
     style,
+    fade,
     ...otherProps
   } = props;
 
@@ -28,8 +30,9 @@ const Tooltip = props => {
       data-dash-is-loading={
         (loading_state && loading_state.is_loading) || undefined
       }
-      {...omit(['setProps'], otherProps)}
-      trigger="hover focus"
+      defaultShow={is_open}
+      {...otherProps}
+      transition={fade}
     >
       <TooltipTemplate
         id={id}
@@ -46,7 +49,9 @@ Tooltip.defaultProps = {
   delay: {show: 0, hide: 50},
   placement: 'auto',
   flip: true,
-  autohide: true
+  autohide: true,
+  fade: true,
+  trigger: 'hover focus'
 };
 
 Tooltip.propTypes = {
@@ -128,6 +133,33 @@ Tooltip.propTypes = {
    */
   autohide: PropTypes.bool,
 
+  /**
+   * If True, a fade animation will be applied when `is_open` is toggled. If
+   * False the Alert will simply appear and disappear.
+   */
+  fade: PropTypes.bool,
+
+  /**
+   * Space separated list of triggers (e.g. "click hover focus legacy"). These
+   * specify ways in which the target component can toggle the tooltip. If
+   * omitted you must toggle the tooltip yourself using callbacks. Options
+   * are:
+   * - "click": toggles the popover when the target is clicked.
+   * - "hover": toggles the popover when the target is hovered over with the
+   * cursor.
+   * - "focus": toggles the popover when the target receives focus
+   * - "legacy": toggles the popover when the target is clicked, but will also
+   * dismiss the popover when the user clicks outside of the popover.
+   *
+   * Default is "hover focus"
+   */
+  trigger: PropTypes.string,
+
+  /**
+   * Whether the Tooltip is open or not.
+   */
+  is_open: PropTypes.bool,
+
   /**
    * Object that holds the loading state object coming from dash-renderer
    */