@thednp/shorty 1.0.3 → 2.0.0-alpha10

package/cypress/e2e/misc.cy.ts

@@ -0,0 +1,331 @@
+/// <reference types="cypress" />
+// @ts-nocheck
+
+// import SHORTY from '../../src/index';
+import * as SHORTY from '../../src/index';
+
+describe('Shorty Library Tests', () => {
+  beforeEach(() => {
+    cy.visit('cypress/test.html');
+  });
+
+  it('Test misc folder - emulateTransitionEnd - no transition', () => {
+    const {
+      dispatchEvent,
+      emulateTransitionEnd,
+      createCustomEvent,
+      reflow,
+      querySelector,
+      setElementStyle,
+      getElementStyle,
+      removeClass,
+      addClass,
+      one,
+    } = SHORTY;
+
+    cy
+      .window()
+      .then(win => {
+        const el = querySelector('.alert', win.document) as HTMLElement;
+        const btn = querySelector('.btn-close', el);
+        const alertHideEvent = createCustomEvent('hide-alert', { relatedTarget: null });
+
+        setElementStyle(el, {
+          transition: 'none',
+          transitionProperty: 'none',
+          transitionDuration: '0s',
+          'transition-delay': '0s',
+          '--transition-prop': 'none',
+        });
+
+        expect(getElementStyle(el, 'transitionProperty')).to.equal('none');
+        expect(getElementStyle(el, 'transition-duration')).to.equal('0s');
+        expect(getElementStyle(el, 'transitionDelay')).to.equal('0s');
+        expect(getElementStyle(el, '--transition-prop')).to.equal('none');
+
+        cy.log('emulateTransitionEnd').then(() => {
+          one(el, 'hide-alert', function hideHandler(e) {
+            cy.log('hide-alert triggered');
+            expect(e.target).to.equal(el);
+            expect(e.relatedTarget).to.equal(btn);
+          });
+
+          one(btn, 'click', function handleBtn(e) {
+            cy.log('clicked btn');
+            expect(e.target).to.equal(btn);
+            removeClass(el, 'show');
+            reflow(el);
+            alertHideEvent.relatedTarget = btn;
+            dispatchEvent(el, alertHideEvent);
+            emulateTransitionEnd(el, function () {
+              addClass(el, 'show');
+              cy.log('transitionend triggered');
+            });
+          });
+
+          btn.click();
+          cy.wait(100);
+        });
+      });
+  });
+
+  it('Test misc folder - emulateTransitionEnd - default', () => {
+    const {
+      dispatchEvent,
+      emulateTransitionEnd,
+      createCustomEvent,
+      reflow,
+      querySelector,
+      removeClass,
+      addClass,
+      one,
+      focus,
+    } = SHORTY;
+
+    cy
+      // .wait('@pageload')
+      .window()
+      .then(win => {
+        const el = querySelector('.alert', win.document);
+        const btn = querySelector('.btn-close', el);
+        const alertHideEvent = createCustomEvent('hide-alert', { relatedTarget: null });
+
+        cy.log('begin **emulateTransitionEnd**').then(() => {
+          one(el, 'hide-alert', function hideHandler(e) {
+            cy.log('hide-alert triggered');
+            expect(e.target).to.equal(el);
+            expect(e.relatedTarget).to.equal(btn);
+          });
+
+          one(btn, 'click', function handleBtn(e) {
+            cy.log('clicked btn');
+            expect(e.target).to.equal(btn);
+            removeClass(el, 'show');
+            reflow(el);
+            alertHideEvent.relatedTarget = btn;
+            dispatchEvent(el, alertHideEvent);
+            emulateTransitionEnd(el, function () {
+              addClass(el, 'show');
+              focus(btn);
+              console.log('transitionend triggered');
+            });
+          });
+
+          btn.click();
+          cy.wait(300);
+        });
+      });
+  });
+
+  it('Test misc folder - emulateAnimationEnd - default', () => {
+    const { emulateAnimationEnd, getElementStyle, querySelector, addClass } = SHORTY;
+    cy
+      // .wait('@pageload')
+      .window()
+      .then(win => {
+        const el = querySelector('.alert', win.document);
+
+        cy.log('begin **emulateAnimationEnd**').then(() => {
+          addClass(el, 'animate-test');
+          emulateAnimationEnd(el, () => {
+            console.log('animationend fired');
+            expect(getElementStyle(el, 'animationName'), 'animationName').to.equal('animate-test');
+            expect(getElementStyle(el, 'animationDuration'), 'animationDuration').to.equal('0.3s');
+            expect(getElementStyle(el, 'animationDelay'), 'animationDelay').to.equal('0s');
+          });
+
+          cy.wait(350);
+        });
+      });
+  });
+
+  it('Test misc folder - emulateAnimationEnd - no duration', () => {
+    const { emulateAnimationEnd, setElementStyle, getElementStyle, querySelector, addClass } =
+      SHORTY;
+    cy
+      // .wait('@pageload')
+      .window()
+      .then(win => {
+        const el = querySelector('.alert', win.document);
+        setElementStyle(el, { animationDuration: '0s' });
+
+        cy.log('begin **emulateAnimationEnd**').then(() => {
+          addClass(el, 'animate-test');
+          emulateAnimationEnd(el, () => {
+            console.log('animationend fired');
+            expect(getElementStyle(el, 'animationName'), 'animationName').to.equal('animate-test');
+            expect(getElementStyle(el, 'animationDuration'), 'animationDuration').to.equal('0s');
+            expect(getElementStyle(el, 'animationDelay'), 'animationDelay').to.equal('0s');
+          });
+
+          cy.wait(100);
+        });
+      });
+  });
+
+  it('Test misc folder - everything else', () => {
+    const {
+      ArrayFrom,
+      Float32ArrayFrom,
+      Float64ArrayFrom,
+      distinct,
+      noop,
+      ObjectHasOwn,
+      ObjectEntries,
+      ObjectAssign,
+      ObjectKeys,
+      ObjectValues,
+      createElement,
+      createElementNS,
+      Data,
+      getInstance,
+      normalizeOptions,
+      Timer,
+      toLowerCase,
+      toUpperCase,
+      querySelector,
+      getElementsByClassName,
+    } = SHORTY;
+    cy
+      // .wait('@pageload')
+      .window()
+      .then(win => {
+        const el = querySelector('.alert', win.document);
+        const table = querySelector('.table', win.document);
+
+        const defaults = { op1: true, op2: true, op3: 5, title: null };
+        const jsOps = { op1: false, op2: false, op3: 8, title: 'something' };
+        expect(ObjectHasOwn(jsOps,'op3')).to.be.true;
+        expect(ObjectHasOwn(jsOps,'momo')).to.be.false;
+        expect(ObjectHasOwn(null,'momo')).to.be.false;
+        expect(normalizeOptions(el, defaults, {}, 'bs'), 'normalizeOptions(data)').to.deep.equal({
+          op1: false,
+          op2: true,
+          op3: 10,
+          title: null,
+        });
+        expect(normalizeOptions(el, defaults, jsOps, 'bs'), 'normalizeOptions(js)').to.deep.equal({
+          op1: false,
+          op2: false,
+          op3: 8,
+          title: 'something',
+        });
+        expect(noop()).to.be.undefined;
+
+        Timer.set('el', noop, 150);
+        Timer.set(el, () => console.log(el.tagName + ' has timer of 150'), 150, 'alert');
+        expect(Timer.get('el', 'alert')).to.be.null;
+        expect(Timer.get(el, 'alert')).to.not.be.undefined;
+        Timer.clear('el', 'alert');
+        Timer.clear(el, 'alert');
+        expect(Timer.get(el, 'alert')).to.be.null;
+
+        Timer.set(el, () => console.log(el.tagName + ' has timer of 250'), 250);
+        expect(Timer.get(el)).to.not.be.null;
+        Timer.clear(el);
+        expect(Timer.get(el)).to.be.null;
+
+        expect([0, 1, 1, 2, 3, 3].filter(distinct), 'filter(DISTINCT)').to.deep.equal([0, 1, 2, 3]);
+
+        expect(toLowerCase('textSample'), 'toLowerCase(string)').to.equal('textsample');
+        expect(toUpperCase('textSample'), 'toUpperCase(string)').to.equal('TEXTSAMPLE');
+
+        expect(
+          ObjectAssign({ c: 3 }, { a: 1, b: 2 }),
+          'ObjectAssign(object1, object2)',
+        ).to.deep.equal({ a: 1, b: 2, c: 3 });
+        expect(ObjectEntries({ a: 1, b: 2 }), 'ObjectEntries(object)').to.deep.equal([
+          ['a', 1],
+          ['b', 2],
+        ]);
+        expect(ObjectKeys({ a: 1, b: 2 }), 'ObjectKeys(object)').to.deep.equal(['a', 'b']);
+        expect(ObjectValues({ a: 1, b: 2 }), 'ObjectValues(object)').to.deep.equal([1, 2]);
+
+        expect(Float32ArrayFrom([0, 1, 2, 3]), 'Float32ArrayFrom(array)').to.be.instanceOf(
+          Float32Array,
+        );
+        expect(Float64ArrayFrom([0, 1, 2, 3]), 'Float64ArrayFrom(array)').to.be.instanceOf(
+          Float64Array,
+        );
+        expect(Float64ArrayFrom([0, 1, 2, 3]).length, 'Float64ArrayFrom(array)').to.eq(4);
+
+        expect(
+          ArrayFrom(new Float32Array([0, 1, 2, 3])),
+          'ArrayFrom(Float32Array)',
+        ).to.be.instanceOf(Array);
+        expect(ArrayFrom(new Float64Array([0, 1, 2, 3])), 'Array(Float64Array)').to.be.instanceOf(
+          Array,
+        );
+        expect(
+          ArrayFrom(getElementsByClassName('table', win.document)),
+          'ArrayFrom(HTMLCollection)',
+        ).to.deep.equal([table]);
+
+        expect(createElement(), 'createElement()').to.be.undefined;
+        expect(createElement('input'), 'createElement(string)').to.be.instanceOf(HTMLInputElement);
+        expect(
+          createElement({
+            tagName: 'p',
+            className: 'lead',
+            innerText: 'This is a newly created paragraph.',
+          }),
+          'createElement(object)',
+        ).to.be.instanceOf(HTMLParagraphElement);
+        expect(
+          createElement({
+            className: 'lead',
+            innerText: 'This is a newly created paragraph.',
+          }),
+          'createElement(incompleteObject)',
+        ).to.be.undefined;
+
+        expect(createElementNS(), 'createElementNS()').to.be.undefined;
+        expect(
+          createElementNS('http://www.w3.org/2000/svg', 'svg'),
+          'createElementNS(ns, string)',
+        ).to.be.instanceOf(SVGElement);
+        expect(
+          createElementNS('http://www.w3.org/1999/xhtml', {
+            tagName: 'button',
+            className: 'btn',
+            innerText: 'New Item',
+          }),
+          'createElementNS(ns, object)',
+        ).to.be.instanceOf(HTMLButtonElement);
+        expect(
+          createElementNS('http://www.w3.org/2000/svg', {
+            tagName: 'path',
+            className: 'icon',
+            d: 'M98,158l157,156L411,158l27,27L255,368L71,185L98,158z',
+          }),
+          'createElementNS(ns, object)',
+        ).to.be.instanceOf(SVGPathElement);
+        expect(
+          createElementNS('http://www.w3.org/2000/svg', {
+            tagName: '',
+            className: 'icon',
+            d: 'M98,158l157,156L411,158l27,27L255,368L71,185L98,158z',
+          }),
+          'createElementNS(ns, object)',
+        ).to.be.undefined;
+
+        Data.set(el);
+        expect(Data.get(el), 'not enough params - Data.get(node)').to.be.null;
+
+        Data.set('str', 'strKey', 'data');
+        expect(Data.get('str', 'strKey'), 'not HTMLElement - Data.get(string, string, string)').to
+          .be.null;
+
+        Data.set(el, 'Alert', { element: el });
+        expect(Data.get(el, 'Alert'), 'Data.get(node, key)').to.deep.equal({ element: el });
+        expect(getInstance(el, 'Alert'), 'getInstance(node, key)').to.deep.equal({ element: el });
+        expect(Data.getAllFor('Alert').size, 'Data.getAllFor(string).size').to.equal(1);
+
+        Data.remove(el, 'Alert');
+        expect(Data.get(el, 'Alert'), 'removed - Data.get(node, string)').to.be.null;
+        expect(getInstance(el, 'Alert'), 'removed - getInstance(node, string)').to.be.null;
+        expect(Data.getAllFor('Alert'), 'removed - Data.getAllFor(string)').to.be.null;
+        Data.remove(el, 'Alert');
+      });
+  });
+});

package/cypress/e2e/selectors.cy.ts

@@ -0,0 +1,85 @@
+/// <reference types="cypress" />
+// @ts-nocheck
+
+// import SHORTY from '../../src/index';
+import * as SHORTY from '../../src/index';
+
+import CustomElem from '../fixtures/custom-elem';
+
+describe('Shorty Library Tests', () => {
+  before(() => {
+    cy.visit('cypress/test.html')
+    .wait(100);
+  });
+
+  it('Test selectors folder', () => {
+    const {
+      closest,
+      getCustomElements,
+      getElementById,
+      getElementsByClassName,
+      getElementsByTagName,
+      matches,
+      querySelector,
+      querySelectorAll,
+    } = SHORTY;
+
+    cy
+      .get('.alert')
+      .then($alert => {
+        const [el] = $alert;
+        const win = el.ownerDocument.defaultView;
+
+        const CE = new CustomElem();
+        win.document.body.append(CE);
+
+        expect(querySelectorAll('div'), 'querySelectorAll(div)').to.have.length(0);
+        expect(querySelectorAll('div', win.document), 'querySelectorAll(div, parent)').to.have.length(1);
+
+        expect(querySelector(), 'querySelector()').to.be.null;
+        expect(querySelector(el), 'querySelector(node)').to.equal(el);
+        expect(querySelector('.alert'), 'querySelector(selector)').to.be.null;
+        expect(querySelector('.alert', win.document), 'querySelector(selector, parent)').to.eq(el);
+
+        expect(closest(el), 'closest()').to.be.null;
+        expect(closest(el, 'wombat'), 'closest(invalid)').to.be.null;
+        expect(closest(el, 'body'), 'closest(body)').to.eq(win.document.body);
+
+        expect(getCustomElements(), 'getCustomElements()').to.deep.equal([]);
+        expect(getCustomElements(win.document), 'getCustomElements(expected)').to.deep.equal([CE]);
+
+        expect(getElementById(), 'getElementById()').to.be.null;
+        expect(getElementById('alertDemo'), 'getElementById(id)').to.be.null;
+        expect(
+          getElementById('alertDemo', win.document),
+          'getElementById(id, parent)',
+        ).to.be.instanceOf(win.HTMLDivElement);
+
+        expect(getElementsByClassName(), 'getElementsByClassName()').to.be.instanceOf(
+          HTMLCollection,
+        );
+        expect(
+          getElementsByClassName('alert'),
+          'getElementsByClassName(selector)',
+        ).to.be.instanceOf(HTMLCollection);
+        expect(
+          getElementsByClassName('alert', win.document),
+          'getElementsByClassName(selector, parent)',
+        ).to.be.instanceOf(win.HTMLCollection);
+
+        expect(getElementsByTagName(), 'getElementsByTagName()').to.be.instanceOf(HTMLCollection);
+        expect(getElementsByTagName('div'), 'getElementsByTagName(selector)').to.be.instanceOf(
+          HTMLCollection,
+        );
+        expect(
+          getElementsByTagName('div', win.document),
+          'getElementsByTagName(selector, parent)',
+        ).to.be.instanceOf(win.HTMLCollection);
+
+        expect(
+          [...getElementsByClassName('alert', win.document)].filter(x => matches(x, 'div')),
+          'matches(node, selector)',
+        ).to.deep.equal([el]);
+      });
+  });
+});

package/cypress/fixtures/custom-elem.js

@@ -0,0 +1,18 @@
+const CEP = document.createElement('p');
+CEP.innerText = 'Sample Custom Element';
+
+export default class CustomElem extends HTMLElement {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' });
+  }
+  connectedCallback() {
+    this.shadowRoot.append(CEP);
+  }
+  disconnectedCallback() {
+    this.shadowRoot.innerHTML = '';
+  }
+}
+
+customElements.define('custom-elem', CustomElem);

package/cypress/plugins/esbuild-istanbul.ts

@@ -0,0 +1,50 @@
+// sources
+// * https://github.com/enketo/enketo-express/blob/master/tools/esbuild-plugin-istanbul.js
+'use strict';
+import esbuild from 'esbuild';
+import { promises } from 'fs';
+import { createInstrumenter } from 'istanbul-lib-instrument';
+import { extname, sep } from 'path';
+import tsCompile from './tsCompile';
+
+// import Cypress settings
+const sourceFolder = 'src';
+const [name] = process.cwd().split(sep).slice(-1);
+
+const sourceFilter = `${name}${sep}${sourceFolder}`;
+const instrumenter = createInstrumenter({
+  compact: false,
+  esModules: true,
+  preserveComments: true,
+  autoWrap: true,
+});
+
+const createEsbuildIstanbulPlugin = (): esbuild.Plugin => {
+  return {
+    name: 'istanbul',
+    setup(build: esbuild.PluginBuild) {
+      build.onLoad(
+        { filter: /\.(ts|tsx)$/ },
+        async ({ path }: esbuild.OnLoadArgs): Promise<{ contents: string } & Record<string, any>> => {
+          
+          if (!path.includes(sourceFilter)) {
+            // console.log("> compiling typescript %s for output build", path);
+            const contents = await promises.readFile(path, 'utf8');
+            return {
+              contents: ['.ts', '.tsx'].includes(extname(path)) ? tsCompile(path).outputText : contents,
+            };
+          }
+
+          // console.log("🧡 instrumenting %s for output coverage", path);
+          const { outputText, sourceMap } = tsCompile(path);
+
+          return {
+            contents: instrumenter.instrumentSync(outputText, path, sourceMap),
+          };
+        },
+      );
+    },
+  };
+};
+
+export default createEsbuildIstanbulPlugin;

package/cypress/plugins/tsCompile.ts

@@ -0,0 +1,34 @@
+// compile.ts
+import TypeScript from 'typescript';
+import { basename } from 'path';
+import { RawSourceMap } from 'source-map';
+import { readFileSync } from 'fs';
+
+export default function tsCompile(
+  path: string,
+  ops?: Partial<TypeScript.TranspileOptions>,
+): TypeScript.TranspileOutput & { sourceMap: RawSourceMap } {
+  // Default options -- you could also perform a merge, or use the project tsconfig.json
+  const options: TypeScript.TranspileOptions = Object.assign(
+    {
+      compilerOptions: {
+        allowJs: true,
+        esModuleInterop: true,
+        removeComments: false,
+        target: 99, // ESNext
+        allowSyntheticDefaultImports: true,
+        isolatedModules: true,
+        noEmitHelpers: true,
+        sourceMap: true,
+      } as Partial<TypeScript.CompilerOptions>,
+    },
+    ops,
+  );
+  const contents = readFileSync(path, { encoding: 'utf8' });
+  const { outputText, sourceMapText } = TypeScript.transpileModule(contents, options);
+  const sourceMap: RawSourceMap = JSON.parse(sourceMapText || '');
+  sourceMap.file = basename(path);
+  sourceMap.sources = [basename(path)];
+
+  return { outputText, sourceMap, sourceMapText };
+}

package/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

package/cypress/support/e2e.ts

@@ -0,0 +1,21 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+import "@cypress/code-coverage/support";

package/cypress/support/index.js

@@ -0,0 +1,22 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import '@cypress/code-coverage/support'

package/cypress/test.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>BSN Testing Page</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
+  <style>
+    @keyframes animate-me {
+      0% { opacity: 1; }
+      50% { opacity: 0; }
+      100% { opacity: 1; }
+    }
+    @keyframes animate-test {
+      from { left: 0px; }
+      to { left: 150px; }
+    }
+    .animate-test {
+      animation-name: animate-test;
+      animation-duration: 0.3s;
+      animation-timing-function: ease-out;
+      animation-delay: 0s;
+    }
+  </style>
+</head>
+<body class="container p-5">
+  <h3>Shorty Examples</h3>
+  <div id="alertDemo" class="alert alert-warning alert-dismissible fade show" data-cy="alert" data-bs-op1="false" data-bs-op2="true" data-bs-op3="10" data-bs-title="" role="alert">
+    <button type="button" class="btn-close bg-none" data-bs-target="alertDemo" data-bs-dismiss="alert" aria-label="Close">
+      <svg viewBox="0 0 16 16" class="align-top"><path name="x" d="M4.646 4.646a0.5 0.5 0 0 1 0.708 0L8 7.293l2.646 -2.647a0.5 0.5 0 0 1 0.708 0.708L8.707 8l2.647 2.646a0.5 0.5 0 0 1 -0.708 0.708L8 8.707l-2.646 2.647A0.5 0.5 0 0 1 4.646 10.646L7.293 8L4.646 5.354a0.5 0.5 0 0 1 0 -0.708z"></path></svg>
+    </button>
+    <p><b>Holy guacamole!</b> Best check yo self, you're not looking too good.</p>
+    <img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgODAgNDMiIHdpZHRoPSI4MCIgaGVpZ2h0PSI0MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICAgICAgICAgICAgICAgIDxyZWN0IGZpbGw9IndoaXRlIiBzdHJva2U9IiNjY2MiIHN0cm9rZS13aWR0aD0iMSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcng9IjUiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgIDx0ZXh0IGRpcmVjdGlvbj0ibHRyIiBmaWxsPSIjMzMzIiB4PSIyNSIgeT0iMjUiIGZvbnQtc2l6ZT0iMTQiPklNRzwvdGV4dD4NCiAgICAgICAgICAgICAgICA8L3N2Zz4=" alt="Image">
+  </div>
+  <table class="table">
+    <thead>
+      <tr>
+        <th>Event Type</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>show.bs.tooltip</code></td>
+        <td>This event fires immediately when the <code>show</code> instance method is called.<br>
+          <b>This event can be default prevented.</b></td>
+      </tr>
+      <tr>
+        <td><code>shown.bs.tooltip</code></td>
+        <td>This event is fired when the tooltip has been made visible to the user.</td>
+      </tr>
+      <tr>
+        <td><code>hide.bs.tooltip</code></td>
+        <td>This event is fired immediately when the <code>hide</code> instance method has been called.<br>
+          <b>This event can be default prevented.</b></td>
+      </tr>
+      <tr>
+        <td><code>hidden.bs.tooltip</code></td>
+        <td>This event is fired when the tooltip has finished being hidden from the user.</td>
+      </tr>
+    </tbody>
+  </table>
+</body>
+</html>