Question

Hi all wonder if someone can help me Consolidate the below code. i should be able to have less lines of code but not sure how to achive this.

$(document).ready(function () {
  $(".question1").hover(function () {
    $(this).append('<div class="tooltip"><p>1This is a tooltip. It is typically used to explain something to a user without taking up space on the page.</p></div>');
  }, function () {
    $("div.tooltip").remove();
  });

  $(".question2").hover(function () {
    $(this).append('<div class="tooltip"><p>2This is a tooltip. It is typically used to explain something to a user without taking up space on the page.</p></div>');
  }, function () {
    $("div.tooltip").remove();
  });

  $(".question3").hover(function () {
    $(this).append('<div class="tooltip"><p>3This is a tooltip. It is typically used to explain something to a user without taking up space on the page.</p></div>');
  }, function () {
    $("div.tooltip").remove();
  });
});

Answer 1

function setTooltipMessage ($elem, message) {
    $elem.hover(
        function () {
            $(this).append('<div class="tooltip"><p>'+message+'</p></div>');
        },
        function () {
            $("div.tooltip").remove();
        }
    );
}

Then :

setTooltipMessage($('.question1'), '1This is a tooltip. It is typically used to explain something to a user without taking up space on the page.');
setTooltipMessage($('.question2'), '2This is a tooltip. It is typically used to explain something to a user without taking up space on the page.');
setTooltipMessage($('.question3'), '3This is a tooltip. It is typically used to explain something to a user without taking up space on the page.');

And as @geedubb pointed out, you can use this function inside a loop