javascript - jQuery 工具提示在 .click 上而不是在 Chrome 扩展中悬停

Question

想要联系并询问是否有人有设计 Chrome 扩展程序的经验。我看到我的 friend 在 Slack 聊天中谈论如果有一个插件可以阻止 mailto: 链接直接转到您的邮件应用程序，而让您选择复制链接中的电子邮件或继续执行该操作，那该多好。 mailto:功能。

到目前为止，我继续找到了一种仅针对页面上的 mailto: 链接的方法，阻止了它们的默认操作，然后我陷入了困境。我想知道是否有一种方法可以在单击功能而不是悬停时启动工具提示，并动态地将元素插入到 mailto: 函数中，以使用我上面描述的两个用户操作打开工具提示窗口。

有人有什么想法吗？我完全不知道如何继续:(

https://codepen.io/matthewvolk/pen/brOEgz

// Select ONLY mailto elements on DOM
$('a[href^="mailto:"]').click(function (event) {

    // Prevent default mailto: action
    event.preventDefault();

    // Open tooltip containing mailto/copy option
    $('a[href^="mailto:"]').tooltip({

        // This is where I'm stuck

    });

});

<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top" title="test">MailTo Action</a> 
<br /><br />
<a href="https://google.com/" target="_blank">Link that still works</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

您可以做的一件事是在页面加载时循环遍历每个 mailto 链接，并事先向其添加工具提示，但默认情况下将它们隐藏在 CSS 中。

然后，单击时切换工具提示的可见性。

下面是一个示例，其中工具提示仅包含 mailto 链接，但您当然可以在要包含在工具提示中的 .each() 函数中添加其他标记。

在工具提示创建过程中，我们使用 $(this).attr('href') 和 $(this).text() 来填写链接在工具提示内。 ($(this) 指的是每个带有以“mailto:”开头的 href 的链接。)

然后我们将原始链接和刚刚创建的工具提示包装在包装器中，这使我们能够轻松地将工具提示放置在样式表中。

$(function(){
  var mailtoLinks = $('a[href^="mailto:"]').each(function(){
    $(this).before(
      '<div class="tooltip">' +
      '<a href="' + $(this).attr('href') + '">' +
      $(this).text() + '</a>' +
      '</div>'
    );
    $(this).add($(this).prev('.tooltip')).wrapAll('<div class="tooltip-wrapper"></div>');
  });
  
  // Select ONLY mailto elements on DOM
  $(mailtoLinks).click(function(event) {
    // Prevent default mailto: action
    event.preventDefault();
    $(this).prev('.tooltip').toggle();
  });
});

.tooltip-wrapper {
  position: relative;
}
.tooltip {
  position: absolute;
  z-index: 1;
  top: calc(-100% - 15px);
  left: -5px;
  padding: 5px;
  background-color: lightgray;
  display: none;
}
.tooltip::after {
  content: '';
  border-top: 10px solid lightgray;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  position: absolute;
  bottom: -10px;
  left: calc(50% - 7.5px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="margin-left: 15%; margin-top: 15%">
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">MailTo Action</a> 

<br />
<br />
<br />

<a href="https://google.com/" target="_blank">Link that still works</a>
</div>

请注意，Google“仍然有效的链接”似乎在此代码段中不起作用，但我认为这是堆栈溢出行为，与此代码无关。