jQuery Tooltip on .click，而不是悬停在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

好一件事是通过每个邮寄地址链接循环在页面加载时并在你的CSS中添加你的工具提示，但默认情况下隐藏在你的CSS中。

然后，在点击时，切换工具提示的可见性

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

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

然后，我们将原始链接和我们刚创建的工具提示封装在一个包装中，这使我们可以轻松地将工具提示放在样式表中。

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

注意，谷歌“链接仍然工作”似乎并不在这个片段的工作，但我认为这是一个堆栈溢出行为，而不是与此相关的代码。