colby-tooltips v1.0.5

Tooltips

A simple ES6 class for handling hover tooltips.

Usage

In the HTML:

<div data-tooltip="The content of the tooltip box">The hover text.</div>

In the JavaScript:

import Tooltips from 'colby-tooltips';

...

window.addEventListener('load', () => new Tooltips(settings));

The settings object

Recommended WordPress shortcode

[tooltip text="The hover text."]The content of the tooltip box[/tooltip]

add_shortcode( 'tooltip', function( $atts, $content ) {
		if ( ! isset( $atts['text'] ) || empty( $content ) ) {
			return '';
		}

		ob_start(); ?>
		<div data-tooltip="<?php echo esc_attr( $content ); ?>">
			<?php echo wp_kses_post( $atts['text'] ); ?>
		</div>
		<?php
		return ob_get_clean();
} );