User:Ddcorkum/Sandbox

;var1 : <span class="apitype-opt">number</span> - Doesn't really do anything
;var2 : <span class="apitype">string</span> - The most important value in the world!
;frame : <span class="apitype-opt">{{api|t=o|Frame}}</span> - A super duper cool widget.

var1

number - Doesn't really do anything

var2

string - The most important value in the world!

frame

Frame - A super duper cool widget.

---

{| class="darktable col2-center"
! Key !! Type !! Desc
|-
! Foo
| class="apitype-opt" | function || The class is applied to the whole cell
|-
! Something
|class="apitype" | table || Ditto but this one isn't optional
|-
! Hello
| <span class="apitype-opt">boolean</span> || The class applied to a span inside the cell
|-
! Fourth row
| <span class="apitype-nil">boolean</span> || Ditto, but this one says nilable
|}

Key	Type	Desc
Foo	function	The class is applied to the whole cell
Something	table	Ditto but this one isn't optional
Hello	boolean	The class applied to a span inside the cell
Fourth row	boolean	Ditto, but this one says nilable

Desktop CSS

.apitype.opt
{
	position:relative;
	color:var(--wowapi-text-color);
}

.apitype-opt::after
{
	content:"?";
	color:var(--theme-page-text-color);
}

.apitype-opt:hover::after
{
	color:var(--theme-page-text-color--hover);
}

.apitype-opt::before
{
	content:"Optional";
	color:#f0f0f0;
	position:absolute;
	right:0;
	top:100%;
	transform:translateX(50%);
	margin:0.2em;
	padding:0.1em;
	font-size:11px;
	background-color:#101010;
	border:1px #b0b0b0 solid;
	border-radius:0.75ex;
 	text-align:left;
 	z-index:1;
	display:none;
}
.apitype-opt:hover::before
{
	display:block;
}

Mobile CSS

.apitype.opt
{
	color:var(--wowapi-text-color);
}

.apitype-opt::after
{
	content:" (optional)";
	color:var(--theme-page-text-mix-color);
}