Template:Tooltip Hover - Revision history

Basara: Niko moved page Template:TooltipHover to Template:Tooltip Hover: Added space between Tooltip and Hover

2023-09-25T06:37:24Z

Niko moved page Template:TooltipHover to Template:Tooltip Hover: Added space between Tooltip and Hover

← Older revision	Revision as of 07:37, 25 September 2023
(No difference)

Basara at 06:36, 25 September 2023

2023-09-25T06:36:57Z

← Older revision		Revision as of 07:36, 25 September 2023
Line 101:		Line 101:

	<noinclude>		<noinclude>
	==~~TooltipHover~~==		==Tooltip Hover==
	Inserts text that has an image display on mouse hover.		Inserts text that has an image display on mouse hover.

Line 111:		Line 111:
	''Note: There is no tooltip type for tooltip images that with more than 500px height. The tooltip image will not be completely above the tooltip text in this case.''		''Note: There is no tooltip type for tooltip images that with more than 500px height. The tooltip image will not be completely above the tooltip text in this case.''

	~~<div style~~="color:red;font-size:125%;background-color:pink;">If you want the text inline (as shown in example) you MUST use <nowiki><span> and </span></nowiki> at the start and end of the section that uses the tooltip (shown in the Example Usage section).</div>		===Usage===

	==Usage==
	<nowiki>		<nowiki>
	{{~~TooltipHover~~		{{Tooltip Hover
	</nowiki><br><nowiki>		</nowiki><br><nowiki>
	\|type = [tooltip-short] or [tooltip] or [tooltip-long] </nowiki>''defaults to tooltip if no class is included''<nowiki>		\|type = [tooltip-short] or [tooltip] or [tooltip-long] </nowiki>''defaults to tooltip if no class is included''<nowiki>
Line 126:		Line 124:
	</nowiki>		</nowiki>

	==Example Usage==		===Example Usage===
	~~<nowiki><span></nowiki>Grants~~
	<nowiki>		<nowiki>
	{{~~TooltipHover~~		{{Tooltip Hover
	</nowiki><br><nowiki>		</nowiki><br><nowiki>
	\|text = Quick Reflexes		\|text = Quick Reflexes
Line 136:		Line 133:
	</nowiki><br><nowiki>		</nowiki><br><nowiki>
	}}		}}
	~~</span>~~
	</nowiki>		</nowiki>

	==Example Preview==		===Example Preview===
	~~<span>Grants~~ <div class="tooltip-short"><b>Quick Reflexes<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[Image:SF CoE Ability Quick Reflexes.png]]</span></b></div~~></span~~>		<div class="tooltip-short"><b>Quick Reflexes<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[Image:SF CoE Ability Quick Reflexes.png]]</span></b></div>

Basara at 06:14, 25 September 2023

2023-09-25T06:14:25Z

← Older revision		Revision as of 07:14, 25 September 2023
Line 110:		Line 110:

	''Note: There is no tooltip type for tooltip images that with more than 500px height. The tooltip image will not be completely above the tooltip text in this case.''		''Note: There is no tooltip type for tooltip images that with more than 500px height. The tooltip image will not be completely above the tooltip text in this case.''

			<div style="color:red;font-size:125%;background-color:pink;">If you want the text inline (as shown in example) you MUST use <nowiki><span> and </span></nowiki> at the start and end of the section that uses the tooltip (shown in the Example Usage section).</div>

	==Usage==		==Usage==
Line 125:		Line 127:

	==Example Usage==		==Example Usage==
			<nowiki><span></nowiki>Grants
	<nowiki>		<nowiki>
	{{TooltipHover		{{TooltipHover
Line 133:		Line 136:
	</nowiki><br><nowiki>		</nowiki><br><nowiki>
	}}		}}
			</span>
	</nowiki>		</nowiki>

	==Example Preview==		==Example Preview==
	<div ~~display="inline-block"~~ class="tooltip-short"><b>Quick Reflexes<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[Image:SF CoE Ability Quick Reflexes.png]]</span></b></div>		<span>Grants <div class="tooltip-short"><b>Quick Reflexes<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[Image:SF CoE Ability Quick Reflexes.png]]</span></b></div></span>


Line 143:		Line 147:


	<div ~~display="inline-block"~~ class="{{{type\|tooltip}}}"><b>{{{text\|tooltip}}}<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[{{{image\|File:NoImage.png}}}]]</span></b></div>		<div class="{{{type\|tooltip}}}"><b>{{{text\|tooltip}}}<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[{{{image\|File:NoImage.png}}}]]</span></b></div>

Basara at 06:02, 25 September 2023

2023-09-25T06:02:44Z

← Older revision		Revision as of 07:02, 25 September 2023
Line 136:		Line 136:

	==Example Preview==		==Example Preview==
	<div class="tooltip-short"><b>Quick Reflexes<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[Image:SF CoE Ability Quick Reflexes.png]]</span></b></div>		<div display="inline-block" class="tooltip-short"><b>Quick Reflexes<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[Image:SF CoE Ability Quick Reflexes.png]]</span></b></div>


Line 143:		Line 143:


	<div class="{{{type\|tooltip}}}"><b>{{{text\|tooltip}}}<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[{{{image\|File:NoImage.png}}}]]</span></b></div>		<div display="inline-block" class="{{{type\|tooltip}}}"><b>{{{text\|tooltip}}}<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[{{{image\|File:NoImage.png}}}]]</span></b></div>

Basara at 05:57, 25 September 2023

2023-09-25T05:57:00Z

← Older revision		Revision as of 06:57, 25 September 2023
Line 98:		Line 98:

	}}		}}


			<noinclude>
			==TooltipHover==
			Inserts text that has an image display on mouse hover.

			;Types:
			:tooltip-short : Intended for image HEIGHT less than 150px</li>
			:tooltip : Intended for image HEIGHT between 150px and 250px</li>
			:tooltip-long : Intended for image HEIGHT between 250px and 500px</li>

			''Note: There is no tooltip type for tooltip images that with more than 500px height. The tooltip image will not be completely above the tooltip text in this case.''

			==Usage==
			<nowiki>
			{{TooltipHover
			</nowiki><br><nowiki>
			\|type = [tooltip-short] or [tooltip] or [tooltip-long] </nowiki>''defaults to tooltip if no class is included''<nowiki>
			</nowiki><br><nowiki>
			\|text = [text that the tooltip defines]
			</nowiki><br><nowiki>
			\|image = [tooltip image file name]
			</nowiki><br><nowiki>
			}}
			</nowiki>

			==Example Usage==
			<nowiki>
			{{TooltipHover
			</nowiki><br><nowiki>
			\|text = Quick Reflexes
			</nowiki><br><nowiki>
			\|image = Image:SF CoE Ability Quick Reflexes.png
			</nowiki><br><nowiki>
			}}
			</nowiki>

			==Example Preview==
			<div class="tooltip-short"><b>Quick Reflexes<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[Image:SF CoE Ability Quick Reflexes.png]]</span></b></div>


			==Template Markup==
			</noinclude>


			<div class="{{{type\|tooltip}}}"><b>{{{text\|tooltip}}}<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[{{{image\|File:NoImage.png}}}]]</span></b></div>

Basara at 04:39, 25 September 2023

2023-09-25T04:39:08Z

← Older revision		Revision as of 05:39, 25 September 2023
Line 1:		Line 1:
	{{#css:		{{#css:

	.tooltip {		.tooltip-short, .tooltip, .tooltip-long {
	position: relative;		position: relative;
	-webkit-transition: all 0.3s ease-in-out 0s;		-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;		transition: all 0.3s ease-in-out 0s;
	display: inline-block;		display: inline-block;
	color: #~~0c96ff~~;		color: #07f;
	}		}
	.tooltip:hover {		.tooltip-short:hover, .tooltip:hover, .tooltip-long:hover {
	color: #fff!important;		color: #fff!important;
	cursor: pointer;		cursor: pointer;
	}		}
	.tooltip a{		.tooltip-short a {
			position: absolute;
			display: block;
			visibility: hidden;
			opacity: 0;
			transition: all .3s;
			border-radius: 5px;
			box-shadow: 0 0 20px #444 inset;
			padding: 3px 5px 3px 5px;
			top: -150px;
			left: -5px;
			z-index: 9999999;
			border: 1px solid #514d4d;
			}
			.tooltip a {
	position: absolute;		position: absolute;
	display: block;		display: block;
Line 26:		Line 40:
	border: 1px solid #514d4d;		border: 1px solid #514d4d;
	}		}
	.tooltip a img {		.tooltip-long a{
			position: absolute;
			display: block;
			visibility: hidden;
			opacity: 0;
			transition: all .3s;
			border-radius: 5px;
			box-shadow: 0 0 20px #444 inset;
			padding: 3px 5px 3px 5px;
			top: -500px;
			left: -5px;
			z-index: 9999999;
			border: 1px solid #514d4d;
			}
			.tooltip-short a img, .tooltip a img, .tooltip-long a img {
	display: block;		display: block;
	border: 1px solid #444;		border: 1px solid #444;
Line 32:		Line 60:
	height: auto;		height: auto;
	}		}
	.tooltip a:after {		.tooltip-short a:after, .tooltip a:after, .tooltip-long a:after {
	content: " ";		content: " ";
	border-style: solid;		border-style: solid;
Line 44:		Line 72:
	bottom: -7px;		bottom: -7px;
	}		}
	.tooltip:hover a{		.tooltip-short:hover a, .tooltip:hover a, .tooltip-long:hover a{
	visibility: visible;		visibility: visible;
	opacity: 1;		opacity: 1;
	}		}
	.tooltip b:before {		.tooltip b:before, .tooltip b:before, .tooltip-long b:before {
	content: "";		content: "";
	position: absolute;		position: absolute;
Line 62:		Line 90:
	transition: all 0.3s ease-in-out 0s;		transition: all 0.3s ease-in-out 0s;
	}		}
	.tooltip b:hover:before {		.tooltip-short b:hover:before, .tooltip b:hover:before, .tooltip-long b:hover:before {
	visibility: visible;		visibility: visible;
	background-color: #0c96ff!important;		background-color: #0c96ff!important;

Basara at 04:17, 25 September 2023

2023-09-25T04:17:36Z

← Older revision		Revision as of 05:17, 25 September 2023
Line 1:		Line 1:
	{{#css:		{{#css:

	.~~PostUrl_tooltip~~ {		.tooltip {
	position: relative;		position: relative;
	-webkit-transition: all 0.3s ease-in-out 0s;		-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;		transition: all 0.3s ease-in-out 0s;
	display: inline-block;		display: inline-block;
	color: #~~ff0~~;		color: #0c96ff;
	}		}
	.~~PostUrl_tooltip~~:hover {		.tooltip:hover {
	color: #~~0c96ff~~!important;		color: #fff!important;
	cursor: pointer;		cursor: pointer;
	}		}
	.~~PostUrl_tooltip~~ a{		.tooltip a{
	position: absolute;		position: absolute;
	display: block;		display: block;
Line 26:		Line 26:
	border: 1px solid #514d4d;		border: 1px solid #514d4d;
	}		}
	.~~PostUrl_tooltip~~ a img {		.tooltip a img {
	display: block;		display: block;
	border: 1px solid #444;		border: 1px solid #444;
Line 32:		Line 32:
	height: auto;		height: auto;
	}		}
	.~~PostUrl_tooltip~~ a:after {		.tooltip a:after {
	content: " ";		content: " ";
	border-style: solid;		border-style: solid;
	border-width: 7px 7px 0px 7px;		border-width: 7px 7px 0px 7px;
	border-color: rgba(55, 64, 70, 0.5) transparent transparent transparent;		border-color: rgba(55, 64, 70, 0.5) transparent transparent transparent;
	transition-duration: 0s;		transition-duration: 0s;
	transform-origin: top;		transform-origin: top;
	transform: translateX(-50%) scaleY(1);		transform: translateX(-50%) scaleY(1);
	position: absolute;		position: absolute;
	left: 5%;		left: 5%;
	bottom: -7px;		bottom: -7px;
	}		}
	.~~PostUrl_tooltip~~:hover a{		.tooltip:hover a{
	visibility: visible;		visibility: visible;
	opacity: 1;		opacity: 1;
	}		}
	.~~PostUrl_tooltip~~ b:before {		.tooltip b:before {
	content: "";		content: "";
	position: absolute;		position: absolute;
Line 62:		Line 62:
	transition: all 0.3s ease-in-out 0s;		transition: all 0.3s ease-in-out 0s;
	}		}
	.~~PostUrl_tooltip~~ b:hover:before {		.tooltip b:hover:before {
	visibility: visible;		visibility: visible;
	background-color: #0c96ff!important;		background-color: #0c96ff!important;
Line 68:		Line 68:
	transform: scaleX(1);		transform: scaleX(1);
	}		}


	}}		}}

Basara at 04:08, 25 September 2023

2023-09-25T04:08:16Z

← Older revision		Revision as of 05:08, 25 September 2023
Line 1:		Line 1:
	{{#css:		{{#css:

	.~~item-title {~~		.PostUrl_tooltip {
	~~color: #cb9;~~
	~~font-weight: bold;~~
	~~font-size: 150%;~~
	}

	~~.item-subtitle {~~
	~~color: #666;~~
	~~font-weight: bold;~~
	}

	~~.item-text {~~
	~~color: #cb9;~~
	}

	~~.object-tooltip~~ {
	position: relative;		position: relative;
	-webkit-transition: all 0.3s ease-in-out 0s;		-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;		transition: all 0.3s ease-in-out 0s;
	display: inline-block;		display: inline-block;
	color: #~~a84;~~		color: #ff0;
	~~font-weight: bold~~;
	}		}
			.PostUrl_tooltip:hover {
	~~.ability-tooltip {~~		color: #0c96ff!important;
	~~position: relative;~~
	~~-webkit-transition: all 0.3s ease-in-out 0s;~~
	~~transition: all 0.3s ease-in-out 0s;~~
	~~display: inline-block;~~
	~~color: #07f;~~
	~~font-weight: bold;~~
	}

	~~.ability-tooltip:hover,~~ .~~object-tooltip~~:hover {
	color: #~~0ff~~!important;
	cursor: pointer;		cursor: pointer;
	}		}
			.PostUrl_tooltip a{
	.~~ability-tooltip a, .object-tooltip~~ a {
	position: absolute;		position: absolute;
	display: block;		display: block;
Line 53:		Line 26:
	border: 1px solid #514d4d;		border: 1px solid #514d4d;
	}		}
			.PostUrl_tooltip a img {
	.~~ability-tooltip a img, .object-tooltip~~ a img {
	display: block;		display: block;
	border: 1px solid #444;		border: 1px solid #444;
Line 60:		Line 32:
	height: auto;		height: auto;
	}		}
			.PostUrl_tooltip a:after {
	~~.ability-tooltip a:after,~~ .~~object-tooltip~~ a:after {		content: " ";
	content: " ";		border-style: solid;
	border-style: solid;		border-width: 7px 7px 0px 7px;
	border-width: 7px 7px 0px 7px;		border-color: rgba(55, 64, 70, 0.5) transparent transparent transparent;
	border-color: rgba(55, 64, 70, 0.5) transparent transparent transparent;		transition-duration: 0s;
	transition-duration: 0s;		transform-origin: top;
	transform-origin: top;		transform: translateX(-50%) scaleY(1);
	transform: translateX(-50%) scaleY(1);
	position: absolute;		position: absolute;
	left: 5%;		left: 5%;
	bottom: -7px;		bottom: -7px;
	}		}
			.PostUrl_tooltip:hover a{
	.~~ability-tooltip:hover a, .object-tooltip~~:hover a{
	visibility: visible;		visibility: visible;
	opacity: 1;		opacity: 1;
	}		}
			.PostUrl_tooltip b:before {
	.~~ability-tooltip b:before, .object-tooltip~~ b:before {
	content: "";		content: "";
	position: absolute;		position: absolute;
Line 93:		Line 62:
	transition: all 0.3s ease-in-out 0s;		transition: all 0.3s ease-in-out 0s;
	}		}
			.PostUrl_tooltip b:hover:before {
	.~~ability-tooltip b:hover:before, .object-tooltip~~ b:hover:before {
	visibility: visible;		visibility: visible;
	background-color: #0c96ff!important;		background-color: #0c96ff!important;
Line 100:		Line 68:
	transform: scaleX(1);		transform: scaleX(1);
	}		}


	}}		}}

Basara at 03:58, 25 September 2023

2023-09-25T03:58:36Z

← Older revision		Revision as of 04:58, 25 September 2023
Line 1:		Line 1:
	{{#css:		{{#css:

			.item-title {
			color: #cb9;
			font-weight: bold;
			font-size: 150%;
			}

			.item-subtitle {
			color: #666;
			font-weight: bold;
			}

			.item-text {
			color: #cb9;
			}

	.object-tooltip {		.object-tooltip {
Line 7:		Line 22:
	display: inline-block;		display: inline-block;
	color: #a84;		color: #a84;
			font-weight: bold;
	}		}

Line 15:		Line 31:
	display: inline-block;		display: inline-block;
	color: #07f;		color: #07f;
			font-weight: bold;
	}		}

	.ability-tooltip:hover, .object-tooltip:hover {		.ability-tooltip:hover, .object-tooltip:hover {
	color: #~~0fff~~!important;		color: #0ff!important;
	cursor: pointer;		cursor: pointer;
	}		}

Basara at 03:45, 25 September 2023

2023-09-25T03:45:43Z

← Older revision		Revision as of 04:45, 25 September 2023
Line 17:		Line 17:
	}		}

	.ability-tooltip:hover, object-tooltip:hover {		.ability-tooltip:hover, .object-tooltip:hover {
	color: #0fff!important;		color: #0fff!important;
	cursor: pointer;		cursor: pointer;
	}		}

	.ability-tooltip a, object-tooltip a{		.ability-tooltip a, .object-tooltip a {
	position: absolute;		position: absolute;
	display: block;		display: block;
Line 37:		Line 37:
	}		}

	.ability-tooltip a img, object-tooltip a img {		.ability-tooltip a img, .object-tooltip a img {
	display: block;		display: block;
	border: 1px solid #444;		border: 1px solid #444;
Line 44:		Line 44:
	}		}

	.ability-tooltip a:after, object-tooltip a:after {		.ability-tooltip a:after, .object-tooltip a:after {
	content: " ";		content: " ";
	border-style: solid;		border-style: solid;
Line 57:		Line 57:
	}		}

	.ability-tooltip:hover a, object-tooltip:hover a{		.ability-tooltip:hover a, .object-tooltip:hover a{
	visibility: visible;		visibility: visible;
	opacity: 1;		opacity: 1;
	}		}

	.ability-tooltip b:before, object-tooltip b:before {		.ability-tooltip b:before, .object-tooltip b:before {
	content: "";		content: "";
	position: absolute;		position: absolute;
Line 77:		Line 77:
	}		}

	.ability-tooltip b:hover:before, object-tooltip b:hover:before {		.ability-tooltip b:hover:before, .object-tooltip b:hover:before {
	visibility: visible;		visibility: visible;
	background-color: #0c96ff!important;		background-color: #0c96ff!important;