Basic Tooltip Screenshots

Custom Image Screenshot

Custom Slot (Children) Screenshot (Your own design)

Live Codepen Example

Installation

Script tag

• Put a script tag similar to this <script type="module" src="https://unpkg.com/@paraboly/pwc-tooltip@latest/dist/pwc-tooltip/pwc-tooltip.esm.js"></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install @paraboly/pwc-tooltip --save
• Put a script tag similar to this <script src='node_modules/@paraboly/pwc-tooltip/dist/pwc-tooltip.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install @paraboly/pwc-tooltip --save
• Add an import to the npm packages import @paraboly/pwc-tooltip;
• Then you can use the element anywhere in your template, JSX, html etc

Usage

Basic Tooltip Usage

<pwc-tooltip
    tooltip-alignment="bottom"
    tooltip-text="Basic Tooltip"
></pwc-tooltip>

Custom Image Tooltip Usage

<pwc-tooltip
  source-width="100"
  source-height="100"
  tooltip-alignment="bottom"
  tooltip-text="Custom Image Source"
  tooltip-source="../../assets/blog.svg"
>
</pwc-tooltip>

Custom Children Design (Slot) Usage

<pwc-tooltip
  tooltip-alignment="right"
  tooltip-text=""
  background-color="transparent"
>
  <div class="container">
    <img
      class="img-container"
      src="https://images.unsplash.com/photo-1516093491926-a4c43060540a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2709&q=80"
    />
    <div class="content-style">
      <h3 class="h3-style">
        Awesome Title
      </h3>
      <ul class="ul-style">
        <li>
          It is a long established fact that a reader will be distracted by
          the readable
        </li>
        <li>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry.
        </li>
        <li>
          Contrary to popular belief, Lorem Ipsum is not simply random text.
        </li>
      </ul>
    </div>
  </div>
</pwc-tooltip>

Authors

FreakyCoder, [email protected] | [email protected]

License

WebComponent PWC PWC Tooltip is available under the MIT license. See the LICENSE file for more info.