/*
 * notion-enhancer core: api
 * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
 * (https://notion-enhancer.github.io/) under the MIT license
 */

'use strict';

/**
 * shared notion-style elements
 * @module notion-enhancer/api/components/tooltip
 */

import { fmt, web } from '../_.mjs';

const _$tooltip = web.html`<div id="enhancer--tooltip"></div>`;
web.loadStylesheet('api/components/tooltip.css');

/**
 * add a tooltip to show extra information on hover
 * @param {HTMLElement} $ref - the element that will trigger the tooltip when hovered
 * @param {string} text - the markdown content of the tooltip
 */
export const setTooltip = ($ref, text) => {
  web.render(document.body, _$tooltip);
  text = web.html`${fmt.md.render(text)}`;
  $ref.addEventListener('mouseover', (event) => {
    web.render(web.empty(_$tooltip), text);
    _$tooltip.style.display = 'block';
  });
  $ref.addEventListener('mousemove', (event) => {
    _$tooltip.style.top = event.clientY - _$tooltip.clientHeight + 'px';
    _$tooltip.style.left = event.clientX - _$tooltip.clientWidth + 'px';
  });
  $ref.addEventListener('mouseout', (event) => {
    _$tooltip.style.display = '';
  });
};