From 42c2a4b536298bf0f4e2400025513430be171e54 Mon Sep 17 00:00:00 2001 From: HMside Date: Sat, 18 Feb 2017 15:04:50 +0100 Subject: [PATCH] added tooltip hover --- www/style.css | 55 ++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 46 insertions(+), 9 deletions(-) diff --git a/www/style.css b/www/style.css index 50aa7ff..a820b24 100644 --- a/www/style.css +++ b/www/style.css @@ -10,27 +10,25 @@ input, select, textarea { .input1 { width: 99%; } - +.input2 { + width: 35%; +} +.input3 { + width: 72%; +} .select1 { width: 100%; } - .select2 { width: 25%; } - .select3 { - width: 26%; + width: 30%; } - .select4 { width: 35%; } -.input3 { - width: 72%; -} - textarea { height: 300px; } @@ -164,3 +162,42 @@ divhover { a:hover + divhover { display: block; } + +.tooltip { + position: relative; + display: inline-block; + border-bottom: 1px dotted black; +} + +.tooltip .tooltiptext { + visibility: hidden; + width: 500px; + background-color: #555; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px 0; + position: absolute; + z-index: 1; + bottom: 125%; + left: 50%; + margin-left: -60px; + opacity: 0; + transition: opacity 1s; +} + +.tooltip .tooltiptext::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #555 transparent transparent transparent; +} + +.tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; +} \ No newline at end of file