# Making a tooltip reusable notebook

**URL:** <https://talk.observablehq.com/t/making-a-tooltip-reusable-notebook/1371>\
**Category:** Help\
**Created:** [October 30, 2018, 1:23pm UTC](https://talk.observablehq.com/t/making-a-tooltip-reusable-notebook/1371 "2018-10-30T13:23:02Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![emepyc](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/emepyc/32/1181_2.png) [@emepyc](https://talk.observablehq.com/u/emepyc)\
**Post date:** [October 30, 2018, 1:23pm UTC](https://talk.observablehq.com/t/making-a-tooltip-reusable-notebook/1371/1 "2018-10-30T13:23:02Z")

</div>

Hi!  
I’m trying to create a reusable tooltip component (for svg elements), but I’m having problems understanding what would be the best approach.  
This is the component I have so far:

> **[Tooltips](https://beta.observablehq.com/@emepyc/tooltips)**
>
> An Observable notebook by Miguel Pignatelli.

Right now it works by getting the element and data _ala_ d3. It searches for the nearest _div_ element and append a new div element positioned in the coordinates returned by `getBoundingClientRect`. I prefer using a div for the tooltip instead of svg elements because they can expand outside of the svg canvas.

What I have done so far is not working very well: i) the positioning of the element seems to have some undesirable offsets (it looks they are coming from the positioning of the `observable` class of the root element. ii) having to rely on finding the parent _div_ element seems weak as well.

I’m wondering if there is a better approach for this. Any advice would be welcome!