CODEWITHSUNDEEP
jquery
odd
odd

Reputation: 449

Consolidate 3 functions

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

Upvotes: 0

Views: 67

Answers (4)

Austin Brunkhorst
Austin Brunkhorst

Reputation: 21130

I would do something like this.

$('.question1, .question2, .question3').hover(function() {
    var question = $(this);
    $('<div/>', {
        'class': 'tooltip',
        'html': '<p>'+ question.data('tooltip') +'</p>'
    }).appendTo(question);
}, function() {
    $(this).find('.tooltip').remove();
});

In your markup you can specify the content appended to each tooltip like this.

<div class="question1" data-tooltip="1This is a tooltip. It is typically used to explain something to a user without taking up space on the page."></div>

Upvotes: 0

Jay Blanchard
Jay Blanchard

Reputation: 34426

    $(document).ready(function() {
        $('[class^="question"]').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() {
        $('.tooltip').remove();
    });
});

This is much more scalable.

Upvotes: 0

Arthur Jaouen
Arthur Jaouen

Reputation: 159

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

Upvotes: 2

geedubb
geedubb

Reputation: 4057

You could use a loop?

    $(document).ready(function () {
        for(var i = 1; i < 4; i++)
        {
      $(".question" + i).hover(function () {
        $(this).append('<div class="tooltip"><p>' + i + 'This 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();
      });
    }
    });

Upvotes: 0

Related Questions