Accessible ACF-Based Tooltip Dictionary

We have a bunch of world language professors prying at the edges of Pressbooks. One of the requests yesterday was to be able to create a mini-dictionary of target language words at the beginning of sections written in that target language. Mousing over the words would show their English equivalent. The intent is to have ready assistance for those who need it so that writing in the target language can happen earlier in the course.

ACF came to mind pretty quickly for this case. I really just needed the ability to generate two values that are paired together- the target language word and the English definition. I need to be able to make as many of these pairs as the person wants to put in there. That’s custom made for the ACF repeater field.

Now that I had an easy way for people to add the words, I just needed a way to do the tooltip display. There are 12,000 ways to do this but I just looked around for one that bragged on its accessibility. I found this example on codepen and went with it. This bit of php builds that content.

function get_the_vocab_words(){
    global $post;
    $html = '<h2 class="alt-dictionary-title">Word Bank</h2><div class="alt-dictionary">';
    if( have_rows('vocabulary_bank', $post->ID) ):
    while ( have_rows('vocabulary_bank') ) : the_row();
        // Your loop code
      $html .= '<button type="button" class="dictionary">' . get_sub_field('target_language_word');
      $html .= '<span class="tooltip tip-top" role="tooltip">' . get_sub_field('english_equivalent') . '</span></button>';
    else :
        // no rows found
    return $html . '</div>';

Now that we have the the content and way to handle the tooltip piece, I needed to stick it at the top of the posts. That’s just a bit of post filter with the results of the function above being passed into the function as a variable.

function add_the_vocab_words( $content ) {
    $words = get_the_vocab_words();
    $content = $words . $content;
    return $content;

add_filter( 'the_content', 'add_the_vocab_words', 20 );

The plugin is up and will even build the ACF portion automatically (for Pressbook content types) if you have ACF Pro activated.