.click 上的 jQuery 工具提示，而不是 chrome 扩展的悬停

Question

想联系并询问是否有人有设计 Chrome 扩展程序的经验。我看到我的朋友在闲聊中谈论如果有一个插件可以阻止 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() 函数中添加其他标记。

在tooltip创建过程中，我们使用$(this).attr('href')和$(this).text()来填写tooltip里面的链接。 （$(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“仍然有效的链接”似乎在此 sn-p 中不起作用，但我认为这是 Stack Overflow 行为，与此代码无关。