Include a style file for tooltips.
This commit is contained in:
Chris Wilson
parent
c737408715
commit
1abc6b2b2e
|
|
@ -43,3 +43,16 @@ button:hover, input[type=submit]:hover{
|
|||
color: #34768a;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/** Tooltip styles */
|
||||
[data-tooltop]{
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[data-tooltip]:before, [data-tooltip]:after{
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,167 @@
|
|||
/**
|
||||
This tooltip file is a modified version of the class found here: https://chrisbracco.com/a-simple-css-tooltip/.
|
||||
The styles in this file are used in compliance with the Creative Commons Attribution-ShareAlike 4.0 International
|
||||
license, which may be found here: https://creativecommons.org/licenses/by-sa/4.0/.
|
||||
*/
|
||||
|
||||
/**
|
||||
README:
|
||||
To give any element a tooltip, simply give that element a data-tooltip attribute with a value of your desired
|
||||
tooltip content. Tooltips position themselves above elements by default. To change the position of the tooltip,
|
||||
give it one of the following classes: tooltip-left, tooltip-right, tooltip-top, or tooltip-bottom.
|
||||
*/
|
||||
|
||||
/* Base styles for the element that has a tooltip */
|
||||
[data-tooltip], .tooltip {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Base styles for the entire tooltip */
|
||||
[data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition:
|
||||
opacity 0.2s ease-in-out,
|
||||
visibility 0.2s ease-in-out,
|
||||
-webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
|
||||
-moz-transition:
|
||||
opacity 0.2s ease-in-out,
|
||||
visibility 0.2s ease-in-out,
|
||||
-moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
|
||||
transition:
|
||||
opacity 0.2s ease-in-out,
|
||||
visibility 0.2s ease-in-out,
|
||||
transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[data-tooltip]:hover:before, [data-tooltip]:hover:after, .tooltip:hover:before, .tooltip:hover:after{
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/** Directional arrow styles */
|
||||
.tooltip:before, [data-tooltip]:before {
|
||||
z-index: 1001;
|
||||
border: 6px solid transparent;
|
||||
background: transparent;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/** Content styles */
|
||||
.tooltip:after, [data-tooltip]:after {
|
||||
z-index: 1000;
|
||||
padding: 8px;
|
||||
width: 160px;
|
||||
border-radius: 4px;
|
||||
background-color: #000;
|
||||
background-color: hsla(0, 0%, 20%, 0.9);
|
||||
color: #fff;
|
||||
content: attr(data-tooltip);
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
[data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after,
|
||||
.tooltip-top:before, .tooltip-top:after {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
[data-tooltip]:before, .tooltip:before, .tooltip-top:before {
|
||||
margin-left: -6px;
|
||||
margin-bottom: -12px;
|
||||
border-top-color: #000;
|
||||
border-top-color: hsla(0, 0%, 20%, 0.9);
|
||||
}
|
||||
|
||||
/** Horizontally align tooltips on the top and bottom */
|
||||
[data-tooltip]:after, .tooltip:after, .tooltip-top:after {
|
||||
margin-left: -80px;
|
||||
}
|
||||
|
||||
[data-tooltip]:hover:before, [data-tooltip]:hover:after, .tooltip:hover:before, .tooltip:hover:after,
|
||||
.tooltip-top:hover:before, .tooltip-top:hover:after {
|
||||
-webkit-transform: translateY(-12px);
|
||||
-moz-transform: translateY(-12px);
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
|
||||
/** Tooltips on the left */
|
||||
.tooltip-left:before, .tooltip-left:after {
|
||||
right: 100%;
|
||||
bottom: 50%;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.tooltip-left:before {
|
||||
margin-left: 0;
|
||||
margin-right: -12px;
|
||||
margin-bottom: 0;
|
||||
border-top-color: transparent;
|
||||
border-left-color: #000;
|
||||
border-left-color: hsla(0, 0%, 20%, 0.9);
|
||||
}
|
||||
|
||||
.tooltip-left:hover:before, .tooltip-left:hover:after {
|
||||
-webkit-transform: translateX(-12px);
|
||||
-moz-transform: translateX(-12px);
|
||||
transform: translateX(-12px);
|
||||
}
|
||||
|
||||
/** Tooltips on the bottom */
|
||||
.tooltip-bottom:before, .tooltip-bottom:after {
|
||||
top: 100%;
|
||||
bottom: auto;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.tooltip-bottom:before {
|
||||
margin-top: -12px;
|
||||
margin-bottom: 0;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #000;
|
||||
border-bottom-color: hsla(0, 0%, 20%, 0.9);
|
||||
}
|
||||
|
||||
.tooltip-bottom:hover:before, .tooltip-bottom:hover:after {
|
||||
-webkit-transform: translateY(12px);
|
||||
-moz-transform: translateY(12px);
|
||||
transform: translateY(12px);
|
||||
}
|
||||
|
||||
/** Tooltips on the right */
|
||||
.tooltip-right:before, .tooltip-right:after {
|
||||
bottom: 50%;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.tooltip-right:before {
|
||||
margin-bottom: 0;
|
||||
margin-left: -12px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: #000;
|
||||
border-right-color: hsla(0, 0%, 20%, 0.9);
|
||||
}
|
||||
|
||||
.tooltip-right:hover:before, .tooltip-right:hover:after {
|
||||
-webkit-transform: translateX(12px);
|
||||
-moz-transform: translateX(12px);
|
||||
transform: translateX(12px);
|
||||
}
|
||||
|
||||
/** Adjustment for directional arrows for tooltips on the left and right */
|
||||
.tooltip-left:before, .tooltip-right:before {
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
/** Center content vertically for tooltips ont he left and right */
|
||||
.tooltip-left:after, .tooltip-right:after {
|
||||
margin-left: 0;
|
||||
margin-bottom: -16px;
|
||||
}
|
||||
|
|
@ -19,10 +19,13 @@
|
|||
</p>
|
||||
</div>
|
||||
<div id="landing-buttons">
|
||||
<a href="uploads"><button>Start Playing</button></a>
|
||||
<a href="uploads">
|
||||
<button>Start Playing</button>
|
||||
</a>
|
||||
</div>
|
||||
<div id="landing-body">
|
||||
<p>This is a randomizer for The Legend of Zelda: A Link to the Past.</p>
|
||||
<p>This is a <span data-tooltip="Allegedly.">randomizer</span> for The Legend of Zelda: A
|
||||
Link to the Past.</p>
|
||||
<p>This is also a multiworld, meaning your items may be placed into other players' worlds, and
|
||||
other players's items may be placed into your world. When a player picks up an item which does
|
||||
not belong to them, it is sent back to the player it belongs to over the internet.</p>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" type="text/css" href="{{ static_autoversion("layout.css") }}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ static_autoversion("tooltip.css") }}" />
|
||||
<script type="application/ecmascript" src="{{ static_autoversion("layout.js") }}"></script>
|
||||
{% block head %}
|
||||
<title>Berserker's Multiworld</title>
|
||||
|
|
|
|||
Loading…
Reference in New Issue