Editing User:Saag/AbilityCircleGive feedback

 <onlyinclude>
 <div class="abilityImage" style="display:inline-block; width:{{{bgsize|128}}}px; height:{{{bgsize|128}}}px;">
              <div style="position:absolute; filter: invert(42%) sepia(10%) saturate(2912%) hue-rotate(-40deg) brightness(190%) contrast(77%);">[[File:Passive ability frame.png|{{{bgsize|128}}}x{{{bgsize|128}}}px|link=]]</div>
              <div class="ability-icon popover__wrapper"
                style="width:100%; height:100%; display:flex; flex-direction:column; justify-content:center;">
                {{#if:{{{displayicon|}}}|[[File:{{{displayicon}}}|{{{iconsize|90}}}x{{{iconsize|90}}}px|middle|center|link=]]|[[File:{{{name|Smoke Bomb}}}.png|link=|{{{iconsize|90}}}x{{{iconsize|90}}}px|middle|center]]}}
                                                                </div>

                <div class="popover__content" style="text-align:left">
                  {{Ability card
                  |name=Splatter
                  |effect1='''Damage:''' 110 {{ss|1.4}}
                  |description=Throw a ball of goo that '''deals damage''' and leaves puddles of goo behind that apply '''movement slow''' to enemies in the radius.
                  |cooldown=20s
                  |duration=10s
                  |effect2='''Movement Slow:''' 35%
                  |upgrade1='''-6s''' Cooldown
                  |upgrade2='''+70''' Damage and '''+1m''' Radius
                  |upgrade3=Bounces 2 times
                  |radius=5m}}
                </div>
            </div>
</onlyinclude>

<div class="hover-wrapper" style="display:inline-block; margin-left: 20px; margin-bottom: 15px; width:768px">
  <!-- The element that triggers the hover effect -->
  <div class="hover-to-show">
    Hover me
  </div>
  
  <!-- The overlay that appears on hover -->
  <div class="hide">
    I'm the hidden content!
  </div>

  <!-- Your other content here -->
  <table>
    <!-- Table content -->
  </table>
</div>

Isolated port of the ability circle and background from [[Template:Ability card]]. Intended for use on [[Heroes]].

{{AbilityCircle|name=Siphon Life}} {{AbilityCircle|name=Shoulder Charge}} {{AbilityCircle|name=Infernal Resilience}} {{AbilityCircle|name=Seismic Impact}}
<noinclude>
<templatedata>
{
	"params": {
		"displayicon": {
			"description": "Use if the ability icon has a different name or uses another icon.",
			"example": "Smoke Bomb.png"
		},
		"iconsize": {
			"description": "Size of the whole icon. Defaults to 90",
			"example": "20",
			"default": "90"
		},
		"name": {
			"description": "Name of the ability",
			"example": "Smoke Bomb",
			"required": true
		},
		"bgsize": {
			"description": "Size of the background circle. Should almost always be larger than the icon",
			"example": "128"
		}
	},
	"paramOrder": [
		"name",
		"iconsize",
		"bgsize",
		"displayicon"
	]
}
</templatedata>
</noinclude>