Callout or thought balloon plugin

Has anyone made a callout or thought balloon plugin? Or wants to make one?

like onboarding guides?

Yes. For me, for personal use I need something simple like this.

But I’ve seen programs that have annotations gallerys:

I know color ranger built some onboarding materials like that (built by @Ali)

You can build a control that works in this manner pretty easily – just use some SVG:

    i { font-style: italic; }
    code { font-family: Menlo; }
    .coachmark {
        background-color: #108AEB; 
        border-radius: 4px; 
        position: relative;
        max-width: 300px;
    .coachmark .pointer {
        position: absolute;
        top: -6px;
        left: 16px;
        width: 16px;
        height: 8px;
        fill: #108AEB; 
    .coachmark p {
        margin: 16px;
        font-size: 12px;
        color: white;
    .coachmark h3 {
        color: white;
        margin: 16px;
        font-weight: bold;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    .right .pointer {
        left: initial;
        right: 16px;

<div class="coachmark at-tab right">
<svg class="pointer" xmlns="" width="16" height="8" viewBox="0 0 16 8">
  <path id="Polygon_1" data-name="Polygon 1" d="M7.293.707a1,1,0,0,1,1.414,0l5.586,5.586A1,1,0,0,1,13.586,8H2.414a1,1,0,0,1-.707-1.707Z" fill="#107fe8"/>

And it looks like this:



@kerrishotts, could the above example work for a menu like XD filters?


Yes, minus the shadow (we don’t support box-shadow yet).

ok, but how can we get the chevron’s x and y to display the menu accordingly?