# Handling mouse events when using d3-brush

**URL:** <https://talk.observablehq.com/t/handling-mouse-events-when-using-d3-brush/2836>\
**Category:** Help\
**Created:** [February 15, 2020, 8:11pm UTC](https://talk.observablehq.com/t/handling-mouse-events-when-using-d3-brush/2836 "2020-02-15T20:11:37Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Geof](https://avatars.discourse-cdn.com/v4/letter/g/c4cdca/32.png) [@Geof](https://talk.observablehq.com/u/Geof)\
**Post date:** [February 15, 2020, 8:11pm UTC](https://talk.observablehq.com/t/handling-mouse-events-when-using-d3-brush/2836/1 "2020-02-15T20:11:37Z")

</div>

Hi,

I have read several articles on related topics, but I am still not sure how to properly handle some mouse / touch events (e.g. to update a tooltip) when using d3.brush().

The code below seems to do the job, but the fact that I need to handle some events manually (e.g. hide the tooltip when brushing outside the chart) makes me think that my approach may not be correct.

> **[Simple dashboard (line charts)](https://observablehq.com/@geofduf/simple-dashboard-line-charts)**
>
> An Observable notebook by geofduf.

Apologies for not providing a more concise example. Here is the general pattern :

```javascript
const brush = d3.brushX()
    .extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]])
    .on("start", () => {
        // For touch screens :
        // Hide remaining tooltips on the page (multiple charts page)
    })
    .on("brush", mouseMoved)
    .on("end", () => {
        // Hide tooltip and process selection
    });

const context = svg.append("g")
    .attr("class", "brush")
    .call(brush)
    .on("touchmove mousemove", mouseMoved)
    .on("touchend mouseleave", () => {
        // Hide tooltip
    });

function mouseMoved() {
    // Check if inside the chart
    // Hide or unhide+update tooltip accordingly
}

```

Any advice would be appreciated.