80 lines
3.0 KiB
HTML
80 lines
3.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" >
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>CodePen - Tooltip appear</title>
|
||
|
|
<link rel="stylesheet" href="./style.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- partial:index.partial.html -->
|
||
|
|
<div class="container">
|
||
|
|
<div class="title">
|
||
|
|
Circle
|
||
|
|
<div class="tooltip">
|
||
|
|
<div class="tooltip-spacing">
|
||
|
|
<div class="tooltip-bg1"></div>
|
||
|
|
<div class="tooltip-bg2"></div>
|
||
|
|
<div class="tooltip-text">?</div>
|
||
|
|
<div class="bubble">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 40" height="80" width="210">
|
||
|
|
<path d="M33.196 0h94.61C134.56 0 140 5.44 140 12.195v15.61C140 34.56 134.56 40 127.805 40h-94.61C26.44 40 21 34.56 21 27.805v-1.903S18.196 15.427 0 20c17.185-10.084 21-5.902 21-5.902v-1.903C21 5.44 26.44 0 33.196 0z" fill="#1a1a1a" />
|
||
|
|
</svg>
|
||
|
|
<div class="bubble-text">Hovering circle</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="body">
|
||
|
|
A circle is a shape consisting of all points in a plane that are at a
|
||
|
|
given distance from a given point, the centre; equivalently it is the
|
||
|
|
curve traced out by a point that moves in a plane so that its distance
|
||
|
|
from a given point is constant.
|
||
|
|
</div>
|
||
|
|
<div class="title title--spacing">
|
||
|
|
Triangle
|
||
|
|
<div class="tooltip">
|
||
|
|
<div class="tooltip-spacing">
|
||
|
|
<div class="tooltip-bg1"></div>
|
||
|
|
<div class="tooltip-bg2"></div>
|
||
|
|
<div class="tooltip-text">?</div>
|
||
|
|
<div class="bubble bubble-triangles">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 40" height="80" width="210">
|
||
|
|
<path d="M33.196 0h94.61C134.56 0 140 5.44 140 12.195v15.61C140 34.56 134.56 40 127.805 40h-94.61C26.44 40 21 34.56 21 27.805v-1.903S18.196 15.427 0 20c17.185-10.084 21-5.902 21-5.902v-1.903C21 5.44 26.44 0 33.196 0z" fill="#1a1a1a" />
|
||
|
|
</svg>
|
||
|
|
<div class="bubble-text bubble-text-triangles">
|
||
|
|
Hovering triangle
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="body">
|
||
|
|
In Euclidean geometry, any three points, when non-collinear, determine a
|
||
|
|
unique triangle and simultaneously, a unique plane (i.e. a
|
||
|
|
two-dimensional Euclidean space).
|
||
|
|
</div>
|
||
|
|
<div class="title title--spacing">
|
||
|
|
Square
|
||
|
|
<div class="tooltip">
|
||
|
|
<div class="tooltip-spacing">
|
||
|
|
<div class="tooltip-bg1"></div>
|
||
|
|
<div class="tooltip-bg2"></div>
|
||
|
|
<div class="tooltip-text">?</div>
|
||
|
|
</div>
|
||
|
|
<div class="bubble bubble-rects">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 40" height="80" width="210">
|
||
|
|
<path d="M33.196 0h94.61C134.56 0 140 5.44 140 12.195v15.61C140 34.56 134.56 40 127.805 40h-94.61C26.44 40 21 34.56 21 27.805v-1.903S18.196 15.427 0 20c17.185-10.084 21-5.902 21-5.902v-1.903C21 5.44 26.44 0 33.196 0z" fill="#1a1a1a" />
|
||
|
|
</svg>
|
||
|
|
<div class="bubble-text bubble-text-rects">Hovering square</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="body">Don't be a ...</div>
|
||
|
|
</div>
|
||
|
|
<!-- partial -->
|
||
|
|
<script src="./script.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|