jQuery/Javascript add unique element to other elements when existing elements only have classes, no IDs

Question

A Wordpress theme allows site administrator to create forms that include a "description" for each field. The descriptions do not have unique IDs, only a common class: 'description.' They look like this:

<div class="field-head"><label for="name">Your name</label><small class="description">A unique description for this field.</small></div>

Instead of displaying these descriptions inline at each field label, as the theme does, I am hiding the description class with CSS (display:none;) and attempting to create a span that has the description as its 'title' property so that jQuery will show it as a tooltip on hover.

This is what I desire:

<div class="field-head"><label for="name">Your name</label><span class="tipwrapper" title='A unique description for this field.'>Hover for a tip</span><small class="description">A unique description for this field.</small></div>

I've successfully hidden the description field with CSS and have tried various means of adding a span before or after the element with the 'description' class. Anticipating that I will eventually iterate though each of these elements, I am first trying to succeed with just a single field (the second one with the description class.) Here are two examples of the many attempts I've made and their results:

Example attempt #1:

  jQuery(document).ready(function($){
if (jQuery(('.field-head')[1]) ){
  var tiptext = $('.field-head .description')[1].innerHTML;
  var txt1 = '<span class="tipwrapper">'+tiptext+'</span>';
  $('.field-head .description')[1].before(txt1); 
};
});

RESULT: This puts the HTML in the correct place, but it is not rendered and is only displayed as inline text, like this:

<span class="tipwrapper">A unique description for this field.</span>

Example attempt #2:

(where I attempt to create the tooltip spans first, then set their titles):

jQuery(document).ready(function($){
  var txt1 = "<span class='tipwrapper' title=''>Hover for a tip</span>";                   
  $('.field-head .description').before(txt1);
  });
jQuery(document).ready(function($){
     if (jQuery(('.field-head')[1]) ){
var classLength = $('.field-head .description').length;
   var tiptext = $('.field-head .description')[1].innerHTML;
   $(('.field-head .tipwrapper')[1]).attr('title', tiptext);
        };
 });

RESULT: This properly renders the tooltip spans before each element with the description class, but the title attribute, where I attempt to set it, remains empty (even though adding alert(tiptext) to the function above confirms the variable is properly getting the description text. The resulting HTML is like this.

<div class="field-head"><label for="name">Your name</label><span class="tooltip" title=''>Hover for a tip</span><small class="description">A unique description for this field.</small></div>

How can I set the html from an element as the 'title' attribute of a new element before it?

Have you considered an initial loop in your script to add the unique Id you desire ..rather than complex workarounds? — Ctznkane525
– Ctznkane525, Commented May 10, 2019 at 22:55

Louys Patrice Bessette · Accepted Answer · 2019-05-10 23:08:22Z

1

Here is a solution which uses .replaceWith() to replace the original small element with a new span.

The .each() loop is used to iterate all the .field-head elements.

See comments in code.

$(".field-head").each(function() {

  // Get the small element in each field-head and get its text
  var small = $(this).find("small")
  var description = small.text();

  // create a span element...
  var span = $("<span>").addClass("tipwrapper").text("Hover for a tip");
  // And set the title.
  span.attr("title", description);

  // Replace the small with the new span
  small.replaceWith(span);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="field-head"><label for="name">Your name</label><small class="description">A unique description for this field.</small></div>

answered May 10, 2019 at 23:08

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chester Over a year ago

Thank you! I am not familiar enough with jQuery to have considered the methods you employed. 2 remarks: 1. Because there are other <small> elements on the page that are not of the description class, I modified your code to find.("small.description"), which appears to work. 2. The dollar sign $ was not being recognized as representing jQuery. I replaced each instance with the word 'jQuery' and that worked. I will do some more research about what could be causing that (maybe check with the theme authors). Thank you again.

Collectives™ on Stack Overflow

jQuery/Javascript add unique element to other elements when existing elements only have classes, no IDs

Example attempt #1:

Example attempt #2:

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Example attempt #1:

Example attempt #2:

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related