first off, I am sorry if this question has been asked before, don't seem to get it.

I would like to change the markup of link in Wordpress to something like this

<a href="#" class="s1  s1--top" data-hint="tooltip here">Just Words.</a>

Where the href would have two extra classes, and I would be able to add words to the data hint dynamically (through the text editor). - It's a tooltip

I have enqueued the stylesheet of the CSS, my main challenge is how to append those extra classes to the a tag, thanks.

I don't mind if someone can help me with JQuery, and lastly, how do I make the tooltip show up.

  • 1
    Where is the link coming from? Is it generated by a theme or a plugin? – sven Jul 11 at 12:29
  • Yh I think, it's basically any link within my post or pages. E.g If I add a link within my post, the class should automatically append to the a tag – Ahmed Faruq Jul 11 at 12:48

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(); */


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>

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 ;-)

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 :)

  • Thanks this looks promising, I have a Js folder already, and I have a specific folder for the CSS called customcss – Ahmed Faruq Jul 11 at 21:24
  • If you already have a js folder use it directly don't create a new one. If you have any other question regarding this don't hesitate :) don't forget to tell me if it worked for you :) EDIT - no need for CSS now :) – LebCit Jul 11 at 21:26
  • It works, thanks but the problem I have is that the tooltip - data-hint, has is own styles, this is what I am trying to implement jqueryscript.net/demo/Cool-Tooltips-with-Pure-CSS-Hint.css – Ahmed Faruq Jul 11 at 21:29
  • Happy that it worked for you. I'll edit my answer for the script :) don't forget to bump up my answer after it works :) – LebCit Jul 11 at 21:34
  • My reputation is low for that, I'll bump it up as soon as I am reputable – Ahmed Faruq Jul 11 at 21:42

Its very simple just use the below jQuery code:


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.