Topo is a smol script for cursor-bound tooltips — sans jQuery and in less than 30 lines of JS. The name comes from the Italian word for “mouse”.


Topo adds event listeners (mouse events, specifically) to elements with a data-tip attribute. A temporal <span> tooltip appears when the cursor hovers over the aforementioned elements.


Include the script on your webpage. Create and initialise a new Topo object.

new Topo().init()

Selected elements must have a data-tip data attribute with the tooltip content. The tooltips appear when you hover your cursor over the assigned elements. You’ll have to style the with CSS for further customisation.

<div data-tip="mice are nice">hover over me</div>
hover over me