Передать массив из html в Less с помощью attr(), а затем обработать его для нескольких элементов (расширение data-balloon)?

Question

У меня есть кусок кода, как

<button 
text="some label"
data-balloon="this is tooltip"
/>

и я использую файл без всплывающих окон в качестве вдохновения, потому что мне нужно сделать всплывающую подсказку для этой кнопки. Но всплывающая подсказка состоит не только из чистого текста (что может делать data-ballon), но она также должна содержать ярлыки, которые имеют другой стиль

(у каждого ключа есть рамка, и если ключей несколько, они разделяются знаком +)

Есть ли возможность реализовать это, используя меньше?

Я представил что-то вроде:

<button 
  text={"some label"}
  data-balloon={"this is tooltip"}
  shortcuts={"Alt","1"}
/>

а потом меньше:

[data-balloon]{
  .
  .
  &:after {
    .
    .
    content: @foreach (attr(shortcuts)){...create one key in little frame inside this tooltip..}
  }
}

Таким образом, результат должен выглядеть примерно так:

Есть идеи, как это сделать?