可點擊的工具提示與關閉按鈕

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做到嗎？是。但爲什麼？這使用更少的代碼，並且因爲您正在生成元素，所以在您自己的網站上更容易設計風格。

希望能解決您的問題。