SVG elements list

Question

I'm trying to do something that looks the snippet i added but with svg circles, is it possible that i put my svg circles in a list? i want the box to appear when i hover into my circle

ul#list_of_thrones {
  list-style-type:none;
}
ul#list_of_thrones li{
  position: relative;
  font-size:20px;
  font-family: helvetica, arial, sans-serif;
}
ul#list_of_thrones li > span{
  position: relative;
  display:none;
}
ul#list_of_thrones li:hover > span{
  position: absolute;
  top:0;
  left:100px;
  display:block;
  background:red;
  color:white;
  padding:6px;
}

ul#list_of_thrones li:hover > span:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-right-color: red;
	border-width: 6px;
	margin-top: -6px;
}

<ul id="list_of_thrones">
  <li>Tyrion<span>Lannister</span></li>
  <li>Loras<span>Tyrell</span></li>
  <li>Gregor<span>Clegane</span></li>
  <li>Brandon<span>Stark</span></li>
  <li>Daenerys<span>Targaryen</span></li>
  <li>Oberyn<span>Martell</span></li>
</ul>

Answer 1

Simply replace the text with an SVG circle, and you should get the same functionality using your existing CSS:

<li><svg><circle cx="10" cy="10" r="10"/></svg><span>Tyrell</span></li>

Snippet:

ul#list_of_thrones {
  list-style-type:none;
}
ul#list_of_thrones li{
  position: relative;
  font-size:20px;
  font-family: helvetica, arial, sans-serif;
}
ul#list_of_thrones li > span{
  position: relative;
  display:none;
}
ul#list_of_thrones li:hover > span{
  position: absolute;
  top:0;
  left:100px;
  display:block;
  background:red;
  color:white;
  padding:6px;
}

svg {
  height: 1.5em;
}

ul#list_of_thrones li:hover > span:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-right-color: red;
	border-width: 6px;
	margin-top: -6px;
}

<ul id="list_of_thrones">
  <li><svg><circle cx="10" cy="10" r="10"/></svg><span>Tyrell</span></li>
  <li><svg><circle cx="10" cy="10" r="10"/></svg><span>Clegane</span></li>
  <li><svg><circle cx="10" cy="10" r="10"/></svg><span>Stark</span></li>
  <li><svg><circle cx="10" cy="10" r="10"/></svg><span>Targaryen</span></li>
  <li><svg><circle cx="10" cy="10" r="10"/></svg><span>Martell</span></li>
</ul>