Skip to content

Latest commit

 

History

History
88 lines (59 loc) · 2.85 KB

README.md

File metadata and controls

88 lines (59 loc) · 2.85 KB
Raw

PEP-Tooltips: Simplify Tooltip Integration

Enhance your web application's user experience by effortlessly incorporating tooltips using the PEP-Tooltips script. With minimal setup, this drop-in solution enables you to convert the "tooltip" attribute into interactive tooltips across your page.

Examples

<div tooltip="Dollars per hour">$9,001</div>
<button tooltip="We won't spam you!">Submit</button>

Installation via NPM

Install directly from the PepsiCo GitHub repository:

npm install --save git+https://github.com/pepsico-ecommerce/pep-tooltips.git

Usage

  1. Import the PEP-Tooltips script into your project:
import 'pep-tooltips';
  1. Include the PEP-Tooltips CSS in your project:
import './css/pep-tooltips.css';
  1. Create a single wrapper div with the id pep-tooltips to hold all tooltip content:
<div id="pep-tooltips"></div>
  1. Apply the tooltip attribute to elements you want to attach tooltips to:
<div tooltip="Dollars per hour">$9,001</div>
<button tooltip="Complete The Pepsi Challenge">Submit</button>

Custom Styling

To customize the appearance of tooltips, utilize the data-tooltip-class attribute on the element. Then, in your CSS file, define rules for #pep-tooltips.custom-tooltip:

<div tooltip="Dollars per hour" data-tooltip-class="custom-styles-for-tooltip">$9,001</div>
#pep-tooltips.custom-styles-for-tooltip {
  width: 500px;
}

Configuration

Tailor tooltips to your preferences using these custom data attributes:

  • data-tooltip-class="custom-class": Adds the specified class to the tooltip container.
  • data-tooltip-arrow: Enables an arrow that points to the element.
  • data-tooltip-placement="auto": Sets the tooltip's placement (official docs).
  • data-tooltip-offset-skidding: Adjusts the tooltip's offset skidding (official docs).
  • data-tooltip-offset-distance: Modifies the tooltip's offset distance (official docs).

Alternative Installation Methods

For different installation approaches, consider the following methods:

<link rel="stylesheet" href="dist/styles.css">
<script src="dist/webpack.bundle.js"></script>

Running PEP-Tooltips Locally

If you wish to work with PEP-Tooltips locally and test changes, follow these steps:

  1. Navigate to the PEP-Tooltips folder and run npm link.
  2. Move to the app folder using PEP-Tooltips (e.g., pepsico-admin) and execute npm link pep-tooltips.
  3. Back in the PEP-Tooltips folder, run make build.

After completing these steps, you should observe your changes to PEP-Tooltips. Note that you need to perform step #3 and refresh your host app's page after each modification.