diff --git a/src/components/AbsoluteTooltip.react.js b/src/components/AbsoluteTooltip.react.js
new file mode 100644
index 00000000..ebcdee79
--- /dev/null
+++ b/src/components/AbsoluteTooltip.react.js
@@ -0,0 +1,306 @@
+import PropTypes from 'prop-types';
+
+import _JSXStyle from 'styled-jsx/style'; // eslint-disable-line no-unused-vars
+
+/**
+ * A tooltip with an absolute position.
+ */
+const AbsoluteTooltip = props => {
+ const {bbox, colors, loading_state} = props;
+ const is_loading = loading_state && loading_state.is_loading;
+
+ return (
+ <>
+
+
+
+ {is_loading ? (
+ {props.loading_text}
+ ) : (
+ props.children
+ )}
+
+
+
+
+
+ );
+};
+
+AbsoluteTooltip.defaultProps = {
+ show: true,
+ targetable: false,
+ direction: 'right',
+ colors: {
+ border: '#d6d6d6',
+ background: 'white',
+ },
+ className: '',
+ zindex: 1,
+ loading_text: 'Loading...',
+};
+
+AbsoluteTooltip.propTypes = {
+ // Dash specific props
+ /**
+ * The children of this component
+ */
+ children: PropTypes.node,
+
+ /**
+ * The ID of this component, used to identify dash components
+ * in callbacks. The ID needs to be unique across all of the
+ * components in an app.
+ */
+ id: PropTypes.string,
+
+ /**
+ * The class of the tooltip
+ */
+ className: PropTypes.string,
+
+ /**
+ * The style of the tooltip
+ */
+ style: PropTypes.object,
+
+ /**
+ * Dash-assigned callback that gets fired when the value changes.
+ */
+ setProps: PropTypes.func,
+
+ // Component specific props
+ /**
+ * The bounding boxes coordinates
+ */
+ bbox: PropTypes.exact({
+ x0: PropTypes.number,
+ y0: PropTypes.number,
+ x1: PropTypes.number,
+ y1: PropTypes.number,
+ }),
+
+ /**
+ * Whether to show the tooltip or not
+ */
+ show: PropTypes.bool,
+
+ /**
+ * Defines the direction in which the hover opens.
+ */
+ direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+
+ /**
+ * Holds the colors used by the ToolTip component. If you set these, you should specify colors for all properties, so:
+ * colors: {
+ * border: '#d6d6d6',
+ * primary: '#1975FA',
+ * background: '#f9f9f9'
+ * }
+ */
+ colors: PropTypes.exact({
+ border: PropTypes.string,
+ background: PropTypes.string,
+ }),
+
+ /**
+ * Prevents rendering of given element, while keeping child elements, e.g. script elements, active.
+ */
+ hidden: PropTypes.string,
+
+ /**
+ * Object that holds the loading state object coming from dash-renderer
+ */
+ loading_state: PropTypes.shape({
+ /**
+ * Determines if the component is loading or not
+ */
+ is_loading: PropTypes.bool,
+ /**
+ * Holds which property is loading
+ */
+ prop_name: PropTypes.string,
+ /**
+ * Holds the name of the component that is loading
+ */
+ component_name: PropTypes.string,
+ }),
+
+ /**
+ * The text displayed in the tooltip when loading
+ */
+ loading_text: PropTypes.string,
+
+ /**
+ * This corresponds to the `z-index` CSS property you want to assign to the tooltip. Components with higher values will be displayed first on the screen.
+ */
+ zindex: PropTypes.number,
+
+ /**
+ * Whether the tooltip can be targeted (hovered, selected, interacted) or not. When set to `False`,
+ * the tooltip's `pointer-events` CSS property will be `none` and it can't be the target of pointer events.
+ */
+ targetable: PropTypes.bool,
+};
+
+export default AbsoluteTooltip;
diff --git a/src/fragments/Graph.react.js b/src/fragments/Graph.react.js
index f846dd71..9054fcbc 100644
--- a/src/fragments/Graph.react.js
+++ b/src/fragments/Graph.react.js
@@ -74,6 +74,10 @@ const filterEventData = (gd, eventData, event) => {
const pointData = filter(function (o) {
return !includes(type(o), ['Object', 'Array']);
}, fullPoint);
+ // permit a bounding box to pass through, if present
+ if (has('bbox', fullPoint)) {
+ pointData.bbox = fullPoint.bbox;
+ }
if (
has('curveNumber', fullPoint) &&
has('pointNumber', fullPoint) &&
diff --git a/src/index.js b/src/index.js
index 5ec4bca0..96d64cd2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,5 @@
/* eslint-disable import/prefer-default-export */
+import AbsoluteTooltip from './components/AbsoluteTooltip.react';
import ConfirmDialog from './components/ConfirmDialog.react';
import ConfirmDialogProvider from './components/ConfirmDialogProvider.react';
import Dropdown from './components/Dropdown.react';
@@ -28,6 +29,7 @@ import 'react-dates/lib/css/_datepicker.css';
import './components/css/react-dates@20.1.0-fix.css';
export {
+ AbsoluteTooltip,
Checklist,
ConfirmDialog,
ConfirmDialogProvider,