Question

想要联系并询问是否有人有设计Chrome扩展程序的经验。我在闲聊时看到我的好友在谈论如果有一个插件阻止mailto会有多么好：链接从直接转到你的邮件应用程序，而是让你选择复制链接中的电子邮件或继续mailto：功能。

到目前为止，我继续前进，找到了一种方法，只针对mailto：页面上的链接，阻止了他们的默认操作，然后我就卡住了。我想知道是否有办法在点击功能而不是悬停上启动工具提示，并动态地将一个元素插入到mailto：function中以打开工具提示窗口，其中包含我上面描述的两个用户操作。

有人有什么想法吗？我完全不在他们身边，不确定如何继续:(

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“仍然有效的链接”似乎不适用于此代码段，但我认为这是一种Stack Overflow行为，与此代码无关。

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

1 个答案: