Question

所以基本上我正在创建工具提示功能。

工具提示将在您单击的元素上显示为新的DOM元素。

这是小提琴：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<button style="margin: 50px;" data-tooltip="This is a tooltip" class="tooltipTarget">Click me!</button>

＆＃13;

但我遇到的问题是只要你触发事件，新的DOM元素就会一直出现。

我不会阻止它。我希望它是这样的：

1）单击按钮

2）出现工具提示

3）再次单击按钮 - 工具提示消失。

我该怎么做？

工作小提琴：https://jsfiddle.net/4d8xhLqj/2/

Answer 1

我想知道@JamesSutherland所做的事情。工具提示应该预先存在，以便您以后只需要使用其定位和不透明度。

尽管如此，如果你真的需要遵循已有的方法，你可以这样做：

<强> 段：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

以下是 resulting fiddle 。希望这会有所帮助。

Answer 2

您应该检查工具提示是否已经显示：

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

    });
});

我已经为新创建的工具提示添加了一个数据属性，以便事后检查是否存在该元素的工具提示，如果是，则将其删除并返回。

Answer 3

只检查工具提示是否作为点击功能的一部分存在。当工具提示存在时删除它，并在工具提示不存在时创建工具提示。

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

这是一个工作小提琴 https://jsfiddle.net/4d8xhLqj/3/

如何在事件上创建DOM元素，然后阻止事件处理程序触发，直到DOM元素存在？

3 个答案: