Skip to content

Fully customizable tooltip web component with StencilJS via Paraboly

License

Notifications You must be signed in to change notification settings

Paraboly/pwc-tooltip

Repository files navigation

Built With Stencil

WebComponent PWC Tooltip

Fully customizable tooltip web component with StencilJS via Paraboly

npm version npm Platform - Platform Free Web License: MIT

Basic Tooltip Screenshots

WebComponent PWC Tooltip WebComponent PWC Tooltip WebComponent PWC Tooltip WebComponent PWC Tooltip

Custom Image Screenshot

WebComponent PWC Tooltip

Custom Slot (Children) Screenshot (Your own design)

WebComponent PWC Tooltip


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, kuray.ogun@paraboly.com | kurayogun@gmail.com

License

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