react-marginotes

Originally forked and inspired from fdansv/marginotes. Use it within react. See the live demo.

Install

via npm:

npm i --save react-marginotes

Usage

react-marginotes is a higher-order component. Wrap it into another component you like:

import Marginotes from 'react-marginotes';
 
let Link = ({ children, href="#" }) => (
    <a href={href}>{children}</a>
);
Link = Marginotes(Link);
 
let Span = ({ children }) => (
    <span style={{color: "blue"}}>{children}</span>
);
Span = Marginotes(Span);

Then use it like before but adding a desc attribute:

<Link desc="...">...</Link>
<Span desc="..."></Span>
<Link href="#" desc="...">...</Link> // other attributes works as well.

Attributes

width: sets the tooltip's width. Default is 100px.

<Link width={120} desc="...">...</Link>