Tooltip

Basic Configuration

The Tooltip component has been designed to work alongside XY charts. The minimal Tooltip configuration looks like:

Loading...

Triggers

The triggers property allows a Tooltip component to display custom content for a given CSS selector.

Loading...

Position

Horizontal Placement

Loading...

Loading...

Vertical Placement

Loading...

Loading...

Horizontal Shift

Loading...

Vertical Shift

Loading...

Manual Configuration

Container

By default the Tooltip will be added to the same DOM element where your chart is located. It will also be constrained to stay within the dimensions of that element. That's not always convenient (for example when you have a sparkline chart and you need the tooltip to be displayed above it) so there's a way to set the container element manually by using the container property. In the most cases you might want to set container to document.body.

Loading...

Components

Similarly, you can manually define the components a Tooltip interacts with using the components property. By default they will be passed from your chart's container (like XYContainer), but if you want to use Tooltip independently you can do that!

const tooltip = new Tooltip({
  components: [components],
  ...tooltipConfig,
})

Controls

You can manually define the behavior of your Tooltip with the following methods:

• hide(): hides the tooltip from view
• place({x: number, y: number}): anchors the tooltip to the coordinate (x,y)
• show(content: HTMLElement | string, pos: {x: number, y: number}) show the value of content at the coordinate (x,y)

React

import { VisTooltip, VisTooltipRef } from '@unovis/react'

function Tooltip() {
  const [toggled, setToggled] = React.useState(false)
  const tooltip = React.useRef<VisTooltipRef>(null)
  
  function toggleTooltip() {
    if (toggled) {
        tooltip.hide()
    } else {
        tooltip.show("👋 I'm a tooltip", { x: 0, y: 0 })
    }
    setToggled(!toggled)
  }
  return (<>
    <button onClick={toggleTooltip}>Toggle</button>
    <VisTooltip ref={tooltip}/>
  </>)
}

Angular

@ElementRef('tooltip') tooltip
toggled = false

toggleTooltip() {
  if (toggled) {
    tooltip.hide()
  } else {
    tooltip.show("👋 I'm a tooltip", { x: 0, y: 0 })
  }
  toggled = !toggled
}

<vis-tooltip #tooltip></vis-tooltip>
<button (click)="toggleTooltip">Toggle</button>

Svelte

<script lang='ts'>
  import { VisTooltip } from '@unovis/svelte'

  let toggled
  
  function toggleTooltip() {
    if (toggled) {
        tooltip.hide()
    } else {
        tooltip.show("👋 I'm a tooltip", { x: 0, y: 0 })
    }
    toggled = !toggled
  }
</script>

<button onClick={toggleTooltip}>Toggle</button>
<VisTooltip bind:this={tooltip}/>

Vue

TypeScript

const tooltip = new Tooltip()
let toggled = false

function toggleTooltip() {
  if (toggled) {
    tooltip.hide()
  } else {
    tooltip.show("👋 I'm a tooltip", { x: 0, y: 0 })
  }
  toggled = !toggled
}
document.getElementById("btn").addEventListener('click', toggleTooltip)

Loading...

Attributes

The attributes property allows you to set custom DOM attributes to Tooltip's div element. It can be useful when you need to refer to your tooltip by using a CSS selector.

Loading...

CSS Variables

The Tooltip component supports additional styling via CSS variables that you can define for your visualization container. For example:

styles.css

.visualization-container-div {
  --vis-tooltip-background-color: '#3f3f3f';
  --vis-tooltip-text-color: '#fefefe';
}

Loading...

All supported CSS variables

--vis-tooltip-background-color: rgba(255, 255, 255, 0.95);
--vis-tooltip-border-color: #e5e9f7;
--vis-tooltip-text-color: #000;
--vis-tooltip-shadow-color: rgba(172, 179, 184, 0.35);
--vis-tooltip-backdrop-filter: none;
--vis-tooltip-padding: 10px 15px;
 
/* Dark Theme */
--vis-dark-tooltip-background-color: rgba(30,30,30, 0.95);
--vis-dark-tooltip-text-color: #e5e9f7;
--vis-dark-tooltip-border-color: var(--vis-color-grey);
--vis-dark-tooltip-shadow-color: rgba(0,0,0, 0.95);

Component Props

Name	Type	Description
* required property