small-tooltip

small-tooltip

Just a small tooltip for ES6 and/or React.

Installation

$ npm install small-tooltip

Examples

  // just paste these few lines of code in your main file (index.js.. or app.js..)
  // that's it, I will be always available in all the pages of your project!
  // ..available for the dynamic elements as well..

  import SmallTooltip from 'small-tooltip';
  import 'small-tooltip/smallTooltip.css';    // <-- easy to customize

  const smallTooltip = new SmallTooltip();
  smallTooltip.init();

  <!-- html  ********** -->

  <!-- insert <div id="small-tooltip"></div> somewhere on your main project file (index.js, app.js..), of course just one time! -->
  <div id="small-tooltip"></div>

  <!-- example of usage -->  
  <div data-tip="I'm a small tooltip">Move your mouse here to see me</div>

  // simple javascript **********

  // insert <div id="small-tooltip"></div> somewhere on your main project file (index.js, app.js..), of course just one time!
  document.body.insertAdjacentHTML('beforeend', `<div id="small-tooltip"></div>`);

  // example of usage
  document.body.insertAdjacentHTML('beforeend', `
    <i data-tip="I'm a lovely small tooltip!!">❤❤❤</i>
  `);

  // or React **********

  function App() {

    return (
      <>

        {
          // insert <div id="small-tooltip"></div> somewhere on your main project file (index.js, app.js..), of course just one time!
          <div id="small-tooltip"></div>
        }
        
        {
          // example of usage
          <h2 data-tip="I'm another small tooltip">Move your mouse here to see me as well!</h2>
        }

      </>
    );

  }

Demo

Just a example project where you can see small-tooltip in action..

License

Licensed under MIT