Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
@vx/tooltip
Advanced tools
npm install --save @vx/tooltip
The @vx/tooltip
package provides utilities for making it easy to add Tooltip
s to a visualization and includes higher-order component (HOC) enhancers and Tooltip components.
import { withTooltip, TooltipWithBounds } from '@vx/tooltip';
import { localPoint } from '@vx/event';
class Chart extends React.Component {
handleMouseOver = (event, datum) => {
const coords = localPoint(event.target.ownerSVGElement, event);
this.props.showTooltip({
tooltipLeft: coords.x,
tooltipTop: coords.y,
tooltipData: datum
});
};
render() {
const {
tooltipData,
tooltipLeft,
tooltipTop,
tooltipOpen,
hideTooltip
} = this.props;
return (
// note React.Fragment is only available in >= react@16.2
<React.Fragment>
<svg width={...} height={...}>
// Chart here...
<SomeChartElement onMouseOver={this.handleMouseOver} onMouseOut={hideTooltip} />
</svg>
{tooltipOpen && (
<TooltipWithBounds
// set this to random so it correctly updates with parent bounds
key={Math.random()}
top={tooltipTop}
left={tooltipLeft}
>
Data value <strong>{tooltipData}</strong>
</TooltipWithBounds>
)}
</React.Fragment>
);
}
}
const ChartWithTooltip = withTooltip(Chart);
render(<ChartWithTooltip />, document.getElementById("root"));
Example codesandbox here.
If you would like to add tooltip state logic to your component, you may wrap it in withTooltip(BaseComponent [, containerProps])
.
The HOC will wrap your component in a div
with relative
positioning by default and handle state for tooltip positioning, visibility, and content by injecting the following props into your BaseComponent
:
You may override the container by specifying containerProps
as the second argument to withTooltip
.
Name | Type | Description |
---|---|---|
showTooltip | func | Call this function with the signature func({ tooltipData, tooltipLeft, tooltipTop }) to set the tooltip state to the specified values. |
hideTooltip | func | Call this function to close a tooltip, i.e., set the showTooltip state to false . |
tooltipOpen | bool | Whether the tooltip state is open or closed |
tooltipLeft | number | The tooltipLeft position passed to the showTooltip func, intended to be used for tooltip positioning |
tooltipTop | number | The tooltipTop position passed to the showTooltip func, intended to be used for tooltip positioning |
tooltipData | any | The tooltipData value passed to the showTooltip func, intended to be used for any data that your tooltip might need to render |
updateTooltip | func | Call this function with the signature func({ tooltipOpen, tooltipLeft, tooltipTop, tooltipData }) to set the tooltip state to the specified values. |
This is a simple Tooltip container component meant to be used to actually render a Tooltip. It accepts the following props, and will spread any additional props on the tooltip container div (i.e., ...restProps):
Name | Type | Default | Description |
---|---|---|---|
left | number or string | -- | Sets style.left of the tooltip container |
top | number or string | -- | Sets style.top of the tooltip container |
className | string | -- | Adds a class (in addition to vx-tooltip-portal ) to the tooltip container |
style | object | -- | Sets / overrides any styles on the tooltip container (including top and left) |
children | node | -- | Sets the children of the tooltip, i.e., the actual content |
This tooltip component is exactly the same as Tooltip
above, but it is aware of its boundaries meaning that it will flip left/right and bottom/top based on whether it would overflow its parent's boundaries. It accepts the following props, and will spread any additional props on the Tooltip component (i.e., ...restProps):
Name | Type | Default | Description |
---|---|---|---|
left | number | -- | The horizontal position of the cursor, tooltip will be place to the left or right of this coordinate depending on the width of the tooltip and the size of the parent container. |
top | number | -- | The vertical position of the cursor, tooltip will be place to the bottom or top of this coordinate depending on the height of the tooltip and the size of the parent container. |
offsetLeft | number | 10 | Horizontal offset of the tooltip from the passed left value, functions as a horizontal padding. |
offsetRight | number | 10 | Vertical offset of the tooltip from the passed top value, functions as a vertical padding. |
style | object | -- | Sets / overrides any styles on the tooltip container (including top and left) |
children | node | -- | Sets the children of the tooltip, i.e., the actual content |
Note that this component is positioned using a transform
, so overriding left
and top
via styles may have no effect.
v0.0.184
albersUsa
projection in d3-geo to @vx/geo. #415equalEarth
projection in d3-geo to @vx/geo. #407defined
prop. Should use oneOfType
rather than oneOf
. #414children
prop. #408Changes:
- @vx/annotation: 0.0.183 => 0.0.184
- @vx/axis: 0.0.183 => 0.0.184
- @vx/demo: 0.0.183 => 0.0.184
- @vx/geo: 0.0.183 => 0.0.184
- @vx/grid: 0.0.183 => 0.0.184
- @vx/marker: 0.0.183 => 0.0.184
- @vx/responsive: 0.0.183 => 0.0.184
- @vx/shape: 0.0.183 => 0.0.184
- @vx/threshold: 0.0.183 => 0.0.184
- @vx/tooltip: 0.0.182 => 0.0.184
- @vx/vx: 0.0.183 => 0.0.184
FAQs
vx tooltip
The npm package @vx/tooltip receives a total of 49,602 weekly downloads. As such, @vx/tooltip popularity was classified as popular.
We found that @vx/tooltip demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.