可点击的工具提示与关闭按钮

Question

我甚至不知道它是如何调用的。我想这不是一个模态对话框。

我正在寻找类似的东西，他们对freelancer.com：

但我不明白他们的代码什么 -

<span class="SiteStats-item-name-icon Icon Icon--small"><svg class="Icon-image" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> 
    <path d="M12 2C6.486 2 2 6.487 2 12c0 5.515 4.486 10 10 10s10-4.485 10-10c0-5.513-4.486-10-10-10zm0 16.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25zm1-4.375V15h-2v-3h1c1.104 0 2-.897 2-2 0-1.104-.896-2-2-2s-2 .896-2 2H8c0-2.205 1.795-4 4-4s4 1.795 4 4c0 1.86-1.277 3.43-3 3.875z"></path> 
</svg> 
</span> 

将被告知是否更好盒子的尖端将与“？”对齐图标。

它应与触摸屏设备兼容，并在单击X或用户在框外单击时关闭。

我想在网上的某个地方有一些现成的脚本来做到这一点。有人知道吗？或者发布一个我可以使用的清晰的代码？

Answer 1

这里是什么可以做，使用在https://www.freelancer.com/所示的框架，通过jQuery UI的改进的一个例子：

工作实施例：https://jsfiddle.net/Twisty/w7ecbd0q/

HTML

<div class="SiteStats-item site-stat"> 
    <div id="posted-listings" data-toggle="popover" data-placement="bottom" data-content="Jobs Posted (Filtered) is defined as the sum of Total Posted Projects and Total Posted Contests, filtered for spam, advertising, test projects, unawardable or otherwise projects that are deemed bad and unable to be fulfilled." 
    class="SiteStats-item-name"> 
    <span class="SiteStats-item-name-text">Total Jobs Posted</span> 
    <span class="SiteStats-item-name-icon Icon Icon--small"> 
     <svg class="Icon-image" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> 
     <path d="M12 2C6.486 2 2 6.487 2 12c0 5.515 4.486 10 10 10s10-4.485 10-10c0-5.513-4.486-10-10-10zm0 16.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25zm1-4.375V15h-2v-3h1c1.104 0 2-.897 2-2 0-1.104-.896-2-2-2s-2 .896-2 2H8c0-2.205 1.795-4 4-4s4 1.795 4 4c0 1.86-1.277 3.43-3 3.875z"/> 
     </svg> 
    </span> 
    </div> 
</div> 

CSS

body { 
    background: #1f2836 none repeat scroll 0 0; 
    text-align: center; 
    color: #f7f7f7; 
    margin: 20px 0; 
    min-height: 1px; 
    padding-left: 12px; 
    padding-right: 12px; 
    position: relative; 
} 

.SiteStats-item-name { 
    font-size: 0.75rem; 
    letter-spacing: 1px; 
    line-height: 1.33; 
    text-align: left; 
    text-transform: uppercase; 
} 

.Icon { 
    fill: #75787d; 
} 

.Callout { 
    background: #ffffff none repeat scroll 0 0; 
    border-radius: 4px; 
    box-sizing: border-box; 
    color: #1f2836; 
    display: none; 
    max-width: 500px; 
    padding: 36px 24px 24px; 
    position: absolute; 
    right: 20px; 
    z-index: 1030; 
} 

.Callout-arrow { 
    color: #75787d; 
    opacity: 1; 
    border-bottom: 8px solid currentcolor; 
    border-left: 8px solid rgba(0, 0, 0, 0); 
    border-right: 8px solid rgba(0, 0, 0, 0); 
    bottom: 100%; 
    color: #ffffff; 
    left: 50%; 
    margin-left: -8px; 
    position: absolute; 
} 

.Callout-close { 
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0; 
    border: 0 none; 
    color: currentcolor; 
    cursor: pointer; 
    line-height: 0; 
    outline: 0 none; 
    padding: 0; 
    position: absolute; 
    right: 12px; 
    top: 12px; 
} 

.Callout-content { 
    font-size: 0.875rem; 
    line-height: 1.43; 
} 

jQuery的

$(function() { 
    $(".SiteStats-item-name-icon").click(function(e) { 
    console.log("Create Call Out."); 
    var tip = $(this).parent().data("content"); 
    var dialog = $("<div>", { 
     id: "callout-posted-listings", 
     class: "Callout is-Callout-active" 
    }); 
    var content = $("<div>", { 
     class: "Callout-content" 
    }).html(tip); 
    var arrow = $("<div>", { 
     id: "callout-posted-listings-arrow", 
     class: "Callout-arrow" 
    }); 
    var closeButton = $("<button>", { 
     id: "callout-posted-listings-close", 
     class: "Callout-close" 
     }) 
     .html('<span class="Callout-close-icon Icon Icon--small">  <svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" class="Icon-image"><path d="M20.707 4.707l-1.414-1.414L12 10.586 4.707 3.293 3.293 4.707 10.586 12l-7.293 7.293 1.414 1.414L12 13.414l7.293 7.293 1.414-1.414L13.414 12"/></svg></span>') 
     .click(function() { 
     dialog.hide(); 
     dialog.remove(); 
     }); 
    dialog.append(arrow).append(closeButton).append(content); 
    $("body").append(dialog); 
    dialog.position({ 
     my: "center top", 
     at: "center " + $(this).parent().data("placement"), 
     of: $(this), 
     collision: "fit" 
    }).show(); 
    arrow.position({ 
     my: "center top", 
     at: "center bottom", 
     of: $(this) 
    }) 
    }); 
}); 

我们不利用工具提示或对话框的在这里，但我们模仿从两个元素。我们希望在用户点击特定图标时动态显示提示。工具提示出现在你悬停时，我们也可以这样做。对话框通常会在点击事件中出现，并通过按钮或按ESC键关闭。

我们需要4个元素，一个div，其中包含箭头（利用框边框技术），关闭button和内容div。内容与父项一起存储为data-content属性。我们也可以收集一些定位数据。

我们创建了4个元素，分配唯一的ID和我们需要的任何类。 CSS有助于隐藏所有内容，我们也可以将它们构建为静态元素。

到目前为止，一切都是正常的jQuery。当我们将所有内容都显示出来时，我们可以利用jQuery UI的强大.position()功能，see more。

我们将伪对话框和箭头定位后显示。普雷斯托！干净地定位在我们想要的位置，箭头也调整到适合我们点击的元素下方。

这可以包装在一个整洁的函数中，并在我们点击几乎任何类似的图标时被调用。它是动态创建的。你可以用ToolTips做这个吗？是。你可以用Dialog做到吗？是。但为什么？这使用更少的代码，并且因为您正在生成元素，所以在您自己的网站上更容易设计风格。

希望能解决您的问题。