s-tooltip v0.6.1-test0

STooltip

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

Demo

How to use

Examples

After importing, s-tooltip tag can be placed in any container in html.

<h3 style="display: inline-block;">
    Hover to see the tooltip
    <s-tooltip orientation="right">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="right">
        <div>
          <h1>h1</h1>
          <h2>h2</h2>
          <h3>h3</h3>
        </div>
    </s-tooltip>
</h3>

How to install

Pure JS

Quick import

<script type="module" src="https://seanwong24.github.io/s-tooltip/build/s-tooltip.esm.js"></script>
<script nomodule src="https://seanwong24.github.io/s-tooltip/build/s-tooltip.js"></script>

Script tag

First, install using NPM.
Then in the html

<!-- for ES6 -->
<script type="module" src="node_modules/s-tooltip/dist/s-tooltip/s-tooltip.esm.js"></script>
<!-- for ES5 -->
<script nomodule src="node_modules/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/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.js

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 '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 "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 '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');

Use NPM to get a local copy

npm i https://github.com/SeanWong24/s-tooltip.git#v0.0.0

Replace v0.0.0 with the actual version

Properties & attibutes

See here