/* globals d3 */

import { showTooltip, hideTooltip } from './tooltip.js';

// An example of an HTML-based tooltip:
d3.select('#htmlTooltip').on('mouseenter', () => {
  showTooltip({
    content: 'This is an <strong>HTML-based</strong> tooltip',
    targetBounds: d3.select('#htmlTooltip').node().getBoundingClientRect(),
    anchor: { x: 0, y: 1 }
  });
}).on('mouseleave', hideTooltip);

// An example of a JS-based tooltip:
d3.select('#jsTooltip').on('mouseenter', () => {
  showTooltip({
    content: tooltip => {
      tooltip.html('This is a <span class="makeMeBold">Javascript-based</span> tooltip');
      tooltip.select('.makeMeBold').style('font-weight', 'bold');
    },
    targetBounds: d3.select('#jsTooltip').node().getBoundingClientRect()
  });
}).on('mouseleave', hideTooltip);