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