CODEWITHSUNDEEP
javascriptjquerydom
Tachi
Tachi

Reputation: 2212

How to create DOM element on event, and then prevent event handler from triggering until DOM element exists?

So basically I'm creating a tooltip function.

And tooltip will appear as a new DOM element over the element you clicked.

Here is the fiddle: 

$(document).ready(function () {
    $('.tooltipTarget').click(function () {
        var title = $(this).data('tooltip');

        $('<p class="tooltip active"></p>')
            .text(title)
            .appendTo('body')
            .fadeIn(250);

        var coords = $(this).offset();
        var tooltipHeight = $('.tooltip').height() + $(this).height() + 20;
        var tooltipWidth = $('.tooltip').width() / 2;

        coords.top = coords.top - tooltipHeight;
        coords.left = coords.left - tooltipWidth;

        $('.tooltip').css({
            top: coords.top,
            left: coords.left
        });

    });
});
.tooltip {
    display: none;
    position: absolute;
    border-radius: 1px;
    color: #767676;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    background: #f7f7f7;
    padding: 10px;
    font-size: 12px;
    text-align: left;
    z-index: 10;
    max-width: 250px;
}
<button style="margin: 50px;" data-tooltip="This is a tooltip" class="tooltipTarget">Click me!</button>

But the problem I have is that new DOM elements will keep appearing as long as you trigger the event.

I wont to prevent it. I want it to be like this:

1)You click a button

2)Tooltip appears

3)You click again on the button - tooltip disappears.

How can I do it?

Working fiddle: https://jsfiddle.net/4d8xhLqj/2/

Upvotes: 0

Views: 68

Answers (3)

gnomical
gnomical

Reputation: 5043

just check whether or not the tooltip exists as part of your click function. Remove the tooltip when it does exist and create a tooltip when it doesn't.

if($('.tooltip').length) {
  $('.tooltip').remove();
}
else {
  //create the tooltip as usual here
}

here is a working fiddle https://jsfiddle.net/4d8xhLqj/3/

Upvotes: 0

Tahir Ahmed
Tahir Ahmed

Reputation: 5737

I would second what @JamesSutherland has put. The tooltip should pre-exist so you only have to play with its positioning and opacity later on.

Having said that though, if you really need to follow the approach that you already have, you could do this:

Snippet:

$(document).ready(function() {
  $('.tooltipTarget').click(function() {
    var title = $(this).data('tooltip');
    if (!$('p.tooltip').hasClass('active')) {
      $('<p class="tooltip active"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn(250);
      var coords = $(this).offset();
      var tooltipHeight = $('.tooltip').height() + $(this).height() + 20;
      var tooltipWidth = $('.tooltip').width() / 2;
      coords.top = coords.top - tooltipHeight;
      coords.left = coords.left - tooltipWidth;
      $('.tooltip').css({
        top: coords.top,
        left: coords.left
      });
    } else {
      $('p.tooltip.active').fadeOut(250, function() {
        $(this).remove();
      });
    }
  });
});
.tooltip {
  display: none;
  position: absolute;
  border-radius: 1px;
  color: #767676;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  background: #f7f7f7;
  padding: 10px;
  font-size: 12px;
  text-align: left;
  z-index: 10;
  max-width: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button style="margin: 200px;" data-tooltip="This is a tooltip" class="tooltipTarget">Click me!</button>

Here is the resulting fiddle. Hope this helps.

Upvotes: 1

taxicala
taxicala

Reputation: 21769

You should check if the tooltip is already shown:

$(document).ready(function () {
    $('.tooltipTarget').click(function () {
        var title = $(this).data('tooltip');
        if ($('.tooltip[data-title=' + title + ']').length > 0) {
            $('.tooltip[data-title=' + title + ']').remove();
            return;
        } 
        $('<p class="tooltip active" data-title=" ' + title + ' "></p>')
            .text(title)
            .appendTo('body')
            .fadeIn(250);

        var coords = $(this).offset();
        var tooltipHeight = $('.tooltip').height() + $(this).height() + 20;
        var tooltipWidth = $('.tooltip').width() / 2;

        coords.top = coords.top - tooltipHeight;
        coords.left = coords.left - tooltipWidth;

        $('.tooltip').css({
            top: coords.top,
            left: coords.left
        });

    });
});

I've added a data attribute to the newly created tooltip in order to check afterwards if there is a tooltip for that element present, and if yes, remove it and return.

Upvotes: 0

Related Questions