.click上的jQuery Tooltip（而不是将鼠标悬停在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()函数中添加要包含在工具提示中的其他标记。

在工具提示创建过程中，我们使用$(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“仍然有效的链接”在此代码段中似​​乎无效，但是我认为这是堆栈溢出行为，与该代码无关。