Clickable Tool Tip с кнопкой закрытия

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) 
    }) 
    }); 
}); 

Мы не используя подсказок или Dialog здесь, но мы имитирующие элементы обоих. Мы хотим, чтобы подсказка отображалась динамически, когда пользователь нажимает на определенный значок. Всплывающие подсказки появляются при наведении курсора, и мы тоже можем это сделать. Диалоги появляются при щелчках обычно и закрываются кнопками или нажимая клавишу ESC.

Нам нужны 4 элемента, div, содержащий стрелку (используя технику бортовой границы), закрытие button и содержание div. Содержимое хранится с родительским атрибутом data-content. Мы также можем проследить некоторые данные позиционирования.

Мы создаем 4 элемента, присваиваем уникальные идентификаторы и любые классы, в которых мы нуждаемся. CSS помогает скрыть все так, мы могли бы создать их как статические элементы.

До сих пор все нормально jQuery. Когда мы пойдем, чтобы все появилось, мы можем использовать мощную функцию .position() пользовательского интерфейса jQuery, see more.

Мы позиционируем наш псевдодиалог и стрелку после того, как они были показаны. Presto! Чисто позиционируется там, где мы хотим, чтобы он был, и стрелка также настраивается под элемент, который мы нажали.

Это может быть завернуто в аккуратную функцию и вызвано, когда мы нажимаем почти любые похожие типы значков. Он динамически создается. Не могли бы вы сделать это с помощью подсказок? Да. Можете ли вы сделать это с помощью Dialog? Да. Но почему? Это использует меньше кода и немного упрощает стиль для вашего собственного сайта, так как вы генерируете элементы.

Надеюсь, что касается вашего вопроса.