STooltip

An easy-to-use tooltip web component for any framework (Angular, React, Vue, etc.) or vanilla JS.

Demo

How to install

Use NPM

npm i @seanwong24/s-tooltip

Use CDN

<script type="module" src="https://unpkg.com/@seanwong24/s-tooltip/dist/s-tooltip/s-tooltip.esm.js"></script>
<script nomodule src="https://unpkg.com/@seanwong24/s-tooltip/dist/s-tooltip/s-tooltip.js"></script>

How to use

First you need to import the component to your project, then the easiest way to use the component is to put s-tooltip tag inside any element that you want to attach in html.

<h3 style="display: inline-block;">
    Hover to see the tooltip
    <s-tooltip>This is a tooltip</s-tooltip>
</h3>

Also, the tooltip content can be html elements.

<h3 style="display: inline-block;">
    Hover to see the tooltip
    <s-tooltip orientation="top">
      <div>
        <h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
      </div>
    </s-tooltip>
</h3>

In some special cases (such as the parent element cannot contain inner html content or one of ancestor elements of s-tooltip having z-index set), you might want put s-tooltip somewhere else instead of putting it inside the attached element. Then you can set attach-to attribute to manually attach the tooltip to another element.

<h3 id="example-item" style="display: inline-block;">
  Hover on me
</h3>
<s-tooltip orientation="right" attach-to="#example-item">This is a tooltip attach to sibling element</s-tooltip>

Optionally, you can add data-s-tooltip-text attribute to the attached elements to replace the content inside s-tooltip.

<button class="example-item" style="display: inline-block;">
  Hover on me
</button>
<button class="example-item" style="display: inline-block;"
  data-s-tooltip-text="The tooltip text of this element is replaced.">
  Hover on me
</button>
<s-tooltip orientation="right" attach-to=".example-item">This is a tooltip attach to sibling element</s-tooltip>

Properties & attributes

To see the list of available properties and attributes, check here.

Want to try it yourself?

How to import

Basically, you want to call defineCustomElements() from the loader. If you want, you can optionally call applyPolyfills() first as well. For different project types, please check below sections for more details.

Vanilla JS

Script tag

First, install using NPM.
Then in the html

<!-- for ES6 -->
<script type="module" src="node_modules/@seanwong24/s-tooltip/dist/s-tooltip/s-tooltip.esm.js"></script>
<!-- for ES5 -->
<script nomodule src="node_modules/@seanwong24/s-tooltip/dist/s-tooltip/s-tooltip.js"></script>

Import statement

First, install using NPM.
Then in JS file

import { applyPolyfills, defineCustomElements } from "node_modules/@seanwong24/s-tooltip/loader/index.js";
applyPolyfills().then(() => {
  defineCustomElements();
});

And in html

<script type="module" src="path/to/the/js/file"></script>

Note that type="module" only works in modern browsers.

Angular

Use loader

First install using NPM.
Then include CUSTOM_ELEMENTS_SCHEMA in any module that uses s-tooltip. For example, in AppModule

import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  bootstrap: [AppComponent],
  // add this
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

After that, in main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// add this
import { applyPolyfills, defineCustomElements } from '@seanwong24/s-tooltip/loader';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

// and add this
applyPolyfills().then(() => {
  defineCustomElements()
});

React

Use loader

First install using NPM.
Then in index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

// add this
import { applyPolyfills, defineCustomElements } from "@seanwong24/s-tooltip/loader";

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

// and add this
applyPolyfills().then(() => {
  defineCustomElements();
});

Vue

Use loader

First install using NPM. Then in main.js

import Vue from 'vue';
import App from './App.vue';

import { applyPolyfills, defineCustomElements } from '@seanwong24/s-tooltip/loader';

Vue.config.productionTip = false;

// add this
Vue.config.ignoredElements = ['s-tooltip'];

// and add this
applyPolyfills().then(() => {
  defineCustomElements();
});

new Vue({
  render: h => h(App)
}).$mount('#app');