Clickable Tool Tip with close button

Question

I'm not even sure how it's called. I suppose it's not a modal dialog box.

I'm looking for something like they have on freelancer.com:

But I didn't understand anything of their code -

<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>

Will be even better if the tip of the box would be aligned to the "?" icon.

It should be compatible with touch screen devices, and close when X is clicked or when user clicks outside of the box.

I guess there's somewhere on the web some ready-made script to do this. Does anyone know it? Or post a clear code that I can use?

Answer 1

Here is an example of what could be done, using the framework shown at https://www.freelancer.com/, improved by jQuery UI:

Working Example: 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)
    })
  });
});

We're not making use of ToolTips or Dialog here, but we're mimicking elements from both. We want a tip to appear, dynamically, when a user clicks a specific icon. Tooltips appear when you hover, and we could do that too. Dialogs appear upon click events usually and are closed by buttons or pressing ESC key.

We need 4 elements, a div that contains the arrow (making use of the box border technique), a close button, and the content div. The content is stored with the parent is the data-content attribute. We can also gleam some positioning data.

We create the 4 elements, assign unique IDs and whatever classes we need. The CSS helps to hide everything so, we could build these as static elements too.

So far, everything is normal jQuery. When we go to make everything appear, we can leverage the powerful .position() feature of jQuery UI, see more.

We position our pseudo dialog and the arrow after they have been show. Presto! Cleanly positioned where we want it to be and the arrow is also adjusted to fit under the element we clicked.

This could be wrapped up in a tidy function and called upon when we click almost any similar types of icons. It's dynamically created. Could you do this with ToolTips? Yes. Could you do it with Dialog? Yes. But why? This uses less code and and is a little bit easier to style to your own site since you're generating the elements.

Hope that addresses your question.