First, Create a js folder, at the same level as style.css and inside it Create a main.js file.
For the tooltip, use jQuery UI Tooltips included in WordPress.
You have to call it inside your functions.php file like this :
/**
* Enqueue jQuery UI Tooltips.
*/
function my_scripts() {
wp_enqueue_script( 'jquery-ui-tooltip' );
wp_enqueue_script( 'main', get_theme_file_uri( '/js/main.js' ), array( 'jquery' ), filemtime( get_theme_file_path( '/js/main.js' ) ), true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
As you can see, we have also enqueue the main.js file 😉
Now, open your main.js file and add the following :
(function ($) {
$( 'a[href="#"]' ).addClass( 's1 s1--top' );
$( '.s1' ).tooltip();
/* OR $( '.s1--top' ).tooltip(); */
/* OR $( '.s1.s1--top' ).tooltip(); */
/* OR $( 'a[href="#"]' ).tooltip(); */
/* OR $( 'a[href="#"].s1' ).tooltip(); */
/* OR $( 'a[href="#"].s1--top' ).tooltip(); */
/* OR $( 'a[href="#"].s1.s1--top' ).tooltip(); */
})(jQuery);
FOR THIS TO WORK, YOU SHOULD CHANGE data-hint to title like so :
<a href="#" title="tooltip here">Just Words.</a>
Classes will be added by jQuery and the format will became :
<a href="#" class="s1 s1--top" title="tooltip here">Just Words.</a>
—–EDIT—–
For the script that you are using, you just need to enqueue the hint.css.
Put the file in a css folder at the same level as style.css and in your functions.php add:
/**
* Enqueue HINT.CSS
*/
function hint_css() {
wp_enqueue_style( 'hint', get_theme_file_uri( '/css/hint.css' ), array(), filemtime( get_theme_file_path( '/css/hint.css' ) ) );
}
add_action( 'wp_enqueue_scripts', 'hint_css' );
Now, I think that you know how to make it work as you want 😉
IMPORTANT NOTE
Remember to create a child theme for all your modifications or they will be removed on the next update of the theme that you are using (unless you are developing a theme).
SYA 🙂