クローズボタン付きのクリック可能なツールヒント

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

jQueryのUIによって改善https://www.freelancer.com/に示すフレームワークを使用して、行うことができるものの例である：

実施例：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キーを押して閉じます。

矢印（ボックスボーダー技術を使用している）、閉じるbutton、および内容divを含むdivの4つの要素が必要です。コンテンツは親と一緒に格納され、data-content属性です。また、いくつかの測位データを掘り起こすこともできます。

私たちは4つの要素を作成し、ユニークなIDと必要なクラスを割り当てます。 CSSはすべてを隠すのに役立ちます。これらを静的要素としても構築できます。

これまでのところ、すべて正常なjQueryです。すべてを表示するようになると、jQuery UIの強力な.position()機能（see more）を活用できます。

擬似ダイアログと矢印は、表示された後に配置されます。プレスト！私たちはそれが欲しいところにきれいに配置され、矢印はクリックした要素の下に収まるように調整されています。

これはきちんとした機能で包まれ、ほぼ同じタイプのアイコンをクリックすると呼び出される可能性があります。動的に作成されます。ツールヒントでこれを行うことができますか？はい。あなたはDialogでそれを行うことができますか？はい。しかし、なぜ？これは少ないコードを使用し、要素を生成するので、自分のサイトにスタイルを設定するのが少し簡単です。

あなたの質問にお応えします。