1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "title": "Oct 13, 2010",
  "items": [
    {
      "text": "Data Set",
      "color": "#009BDB"
    },
    {
      "text": "Data Set",
      "color": "#BEC7D0"
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
<div class="m-chart-legend-tooltip">
	{% if title %}
		<h2 class="m-chart-legend-tooltip__title">{{ title }}</h2>
	{% endif %}
	<ul class="m-chart-legend-tooltip__items">
		{% for item in items %}
			<li class="a-chart-legend-label">
				<span>{{ item.text }}</span>
			</li>
		{% endfor %}
	</ul>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.m-chart-legend-tooltip {
  pointer-events: none;
  transition: opacity $timing--short $bezier--sharp;
  background-color: var(--color--background);
  border-width: 1px;
  padding: 16px 20px;
  border-color: var(--color--rules--primary);
  z-index: 99;

  &:not(:only-child) {
    opacity: 0;
  }

  &__title {
    @include f-ui-4;
  }

  &__items:not(:first-child) {
    @include spacing(
      (
        xsmall: 8px
      )
    );
  }
}