npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@aristotle-metadata-enterprises/aristotle_tooltip

v1.2.4

Published

Aristotle Tooltip: add Aristotle functionality to any website!

Downloads

2,495

Readme

Javascript Tests Publish to NPM

Features

  • :heavy_check_mark: Adaptable: use any Aristotle Metadata Registry!
  • :globe_with_meridians: IE11+ Support * : compatible with 99% of desktop and 98% of mobile users.
  • :mouse: Light: weighs just 60kb, including image assets.
  • :dog: Dogfooded: This library is used in our production Aristotle Registries. Updates guaranteed!

Example

Image

Quick Start

Package Manager

Install the aristotle-tooltip package:

frankie@aristotle:~$ npm i @aristotle-metadata-enterprises/aristotle_tooltip

In your application, import the aristotle_tooltip module, and the core css:

import aristotleTooltip from '@aristotle-metadata-enterprises/aristotle_tooltip'
import 'aristotle_tooltip/dist/tooltip.css'

This assumes you're using a module bundler like Webpack, Rollup or Parcel.

CDN

<script src="https://cdn.jsdelivr.net/npm/@aristotle-metadata-enterprises/aristotle_tooltip@latest/dist/aristotletooltip.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aristotle-metadata-enterprises/aristotle_tooltip@latest/dist/tooltip.css">

Place the script at the very bottom of the <body>. It must be placed before your own scripts, because of how the underlying Tippy.js library adds the tooltips.

Usage

To add a tooltip for a piece of content on your webpage:

A <a href="#" data-aristotle-concept-id="498427">person</a> is known by the company they keep

Custom styling for Aristotle links can set by applying CSS rules that target attribute decorators:

a[data-aristotle-concept-id] {
  border-bottom: 1px dotted #155799;
}
a[data-aristotle-concept-id]:hover {
  text-decoration: none;
  border-bottom: 1px solid #155799;
}

Setup

let options = {
  'url': 'https://registry.aristotlemetadata.com',
  'definitionWords': 50,
  'longDefinitionWords': 75,
};
aristotleTooltip(options);

Options

| Option | Default | Explanation | | ------------- |:-------------:| -----| | url | registry.aristotlemetadata.com | The URL of an Aristotle Metadata Registry | | definitionWords | 50 | The number of words to display in the initial popup | | longDefinitionWords | 75 | The number of words to display when 'see more..' is pressed | | placement | bottom| The positioning of the tooltip | | trigger | mouseenter focus | Events used to trigger the tooltip | | externalLinkVisible | true | Whether to display an external link icon next to the name of the metadata item | | selector | document.body | Element or css selector for creating tooltips under, tooltips not under this element will be ignored | | interactive | true | Whether interactive content such as links should be displayed |

Setting up a Development Environment

We're an open source project that welcomes any new contributions. To setup a development environment, simply fork the repo, clone it locally, and from within the aristotle-tooltip project, run:

oscar@aristotle:~$ npm install
oscar@aristotle:~$ npm run build:dev

IE11 Compatibility

A Promise polyfill is required for IE11 compatibility.aristotle-tooltip has been tested to work with ES6 Promise

ES6 Promise with a CDN

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>