@paraboly/pwc-tooltip

v0.0.3

Fully customizable tooltip web component with StencilJS via Paraboly

NPM

README

GitHub

Website

MIT

Latest version published 1 year ago

    npm install @paraboly/pwc-tooltip

We couldn't find any similar packages Browse all packages

Package Health Score

43 / 100

Popularity
Limited
Maintenance
Inactive
Security
No known security issues
Community
Limited

Make sure the open source you're using is safe to use

Secure my Project

Popularity

Limited

Weekly Downloads (6)

Dependents: 1
GitHub Stars: 7
Forks: 1
Contributors: 2

The npm package @paraboly/pwc-tooltip receives a total of 6 downloads a week. As such, we scored @paraboly/pwc-tooltip popularity level to be Limited.

Based on project statistics from the GitHub repository for the npm package @paraboly/pwc-tooltip, we found that it has been starred 7 times, and that 1 other projects in the ecosystem are dependent on it.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Security

No known security issues

Security and license risk for significant versions

All Versions

Direct Vulnerabilities

0.0.3

Indirect Vulnerabilities

0.0.3

License Risks

0.0.3

All security vulnerabilities belong to production dependencies of direct and indirect packages.

License

MIT

Security Policy

We found a way for you to contribute to the project! Looks like @paraboly/pwc-tooltip is missing a security policy.

You can connect your project's repository to Snyk to stay up to date on security alerts and receive automatic fix pull requests.

We found a way for you to contribute to the project! Looks like @paraboly/pwc-tooltip is missing a security policy.

    # Install the Snyk CLI and test your project
npm i snyk && snyk test @paraboly/pwc-tooltip

Keep your project free of vulnerabilities with Snyk

Maintenance

Inactive

Commit Frequency

No Recent Commits

Open Issues: 0
Merged PR: 1
Open PR: 0
Last Commit: 1 year ago

Further analysis of the maintenance status of @paraboly/pwc-tooltip based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Inactive.

An important project maintenance signal to consider for @paraboly/pwc-tooltip is that it hasn't seen any new versions released to npm in the past 12 months, and could be considered as a discontinued project, or that which receives low attention from its maintainers.

In the past month we didn't find any pull request activity or change in issues status has been detected for the GitHub repository.

Community

Limited

Readme.md: No
Contributing.md: No
Code of Conduct: No
Contributors: 2
Funding: No

This project has seen only 10 or less contributors.

We found a way for you to contribute to the project! Looks like @paraboly/pwc-tooltip is missing a Code of Conduct.

How about a good first contribution to this project? It seems that @paraboly/pwc-tooltip is missing a README file.

Embed Package Health Score Badge

Package

Node.js Compatibility: not defined

Age: 1 year
Dependencies: 0 Direct / 0 Total
Versions: 4
Install Size: 233 kB
Dist-tags: 1
# of Files: 21
Maintainers: 1
TS Typings: Yes

@paraboly/pwc-tooltip has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Basic Tooltip Screenshots

WebComponent PWC Tooltip

Custom Image Screenshot

WebComponent PWC Tooltip

Custom Slot (Children) Screenshot (Your own design)

WebComponent PWC Tooltip

Live Codepen Example

Installation

Script tag

Put a script tag similar to this <script type="module" src="https://unpkg.com/@paraboly/pwc-tooltip@0.0.1/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.