dev

accgit · accgit · commit af006c7ff71e · 2017-03-17T07:15:33.000+01:00
diff --git a/readme.md b/readme.md
@@ -0,0 +1,7 @@
+## Tooltip
+
+Simple tooltip.
+
+## Instruction
+
+Download and insert [css.ui.min.css](https://github.com/css-ui/cssui/tree/master/src/min) to directory css.
diff --git a/src/css/style.css b/src/css/style.css
@@ -0,0 +1,23 @@
+
+/*
+    import css styles
+*/
+@import url(css.ui.min.css);
+@import url(style.tooltip.css);
+
+/*
+    elements
+*/
+body {
+    background-color: #f4f4f4;
+         font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
+	     padding: 10px 10px 0;
+}
+
+/*
+    layout
+*/
+.container {
+    margin-top: 50px;
+     max-width: 1170px;
+}
diff --git a/src/css/style.tooltip.css b/src/css/style.tooltip.css
@@ -0,0 +1,51 @@
+
+/*
+    tooltip
+*/
+[data-tooltip] {
+    position: relative;
+     z-index: 2;
+}
+
+[data-tooltip]:before,
+[data-tooltip]:after {
+    visibility: hidden;
+       opacity: 0;
+}
+
+[data-tooltip]:before {
+    background-color: rgba(0, 0, 0, 0.95);
+       border-radius: 3px;
+       margin-bottom: 5px;
+         margin-left: -50px;
+	  text-align: center;
+	   min-width: 100px;
+	   font-size: 1em;
+            position: absolute;
+	     content: attr(data-tooltip);
+	     padding: 5px;
+	      bottom: 120%;
+	       color: #fff;
+	        left: 50%;
+}
+
+
+[data-tooltip]:after {
+    border-right: 5px solid transparent;
+     border-left: 5px solid transparent;
+     margin-left: -5px;
+     line-height: 0;
+      border-top: 5px solid rgba(0, 0, 0, 0.95);
+       font-size: 0;
+        position: absolute;
+	 content: " ";
+	  bottom: 120%;
+	   width: 0;
+	    left: 50%;
+}
+
+[data-tooltip]:hover:before,
+[data-tooltip]:hover:after {
+    visibility: visible;
+       opacity: 1;
+}
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="cs">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="CSS UI - Tooltip">
+	<meta name="author" content="Zdeněk Papučík, zdenek.papucik@gmail.com">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>CSS UI - Tooltip</title>
+
+	<!-- CSS styles -->
+	<link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+	<!-- container -->
+	<div class="container">
+		<a href="#" data-tooltip="Hello">Hello</a>
+	</div>
+</body>
+</html>
