This repository was archived by the owner on Sep 5, 2019. It is now read-only.

Commit af006c7

committed

dev

0 parents commit af006c7Copy full SHA for af006c7

File tree

+100

-0

lines changed

+100

-0

lines changed

Lines changed: 7 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,7 @@`
	`1`	`+## Tooltip`
	`2`	`+`
	`3`	`+Simple tooltip.`
	`4`	`+`
	`5`	`+## Instruction`
	`6`	`+`
	`7`	`+Download and insert [css.ui.min.css](https://github.com/css-ui/cssui/tree/master/src/min) to directory css.`

Lines changed: 23 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,23 @@`
	`1`	`+`
	`2`	`+/*`
	`3`	`+ import css styles`
	`4`	`+*/`
	`5`	`+@import url(css.ui.min.css);`
	`6`	`+@import url(style.tooltip.css);`
	`7`	`+`
	`8`	`+/*`
	`9`	`+ elements`
	`10`	`+*/`
	`11`	`+body {`
	`12`	`+ background-color: #f4f4f4;`
	`13`	`+ font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;`
	`14`	`+ padding: 10px 10px 0;`
	`15`	`+}`
	`16`	`+`
	`17`	`+/*`
	`18`	`+ layout`
	`19`	`+*/`
	`20`	`+.container {`
	`21`	`+ margin-top: 50px;`
	`22`	`+ max-width: 1170px;`
	`23`	`+}`

Lines changed: 51 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,51 @@`
	`1`	`+`
	`2`	`+/*`
	`3`	`+ tooltip`
	`4`	`+*/`
	`5`	`+[data-tooltip] {`
	`6`	`+ position: relative;`
	`7`	`+ z-index: 2;`
	`8`	`+}`
	`9`	`+`
	`10`	`+[data-tooltip]:before,`
	`11`	`+[data-tooltip]:after {`
	`12`	`+ visibility: hidden;`
	`13`	`+ opacity: 0;`
	`14`	`+}`
	`15`	`+`
	`16`	`+[data-tooltip]:before {`
	`17`	`+ background-color: rgba(0, 0, 0, 0.95);`
	`18`	`+ border-radius: 3px;`
	`19`	`+ margin-bottom: 5px;`
	`20`	`+ margin-left: -50px;`
	`21`	`+ text-align: center;`
	`22`	`+ min-width: 100px;`
	`23`	`+ font-size: 1em;`
	`24`	`+ position: absolute;`
	`25`	`+ content: attr(data-tooltip);`
	`26`	`+ padding: 5px;`
	`27`	`+ bottom: 120%;`
	`28`	`+ color: #fff;`
	`29`	`+ left: 50%;`
	`30`	`+}`
	`31`	`+`
	`32`	`+`
	`33`	`+[data-tooltip]:after {`
	`34`	`+ border-right: 5px solid transparent;`
	`35`	`+ border-left: 5px solid transparent;`
	`36`	`+ margin-left: -5px;`
	`37`	`+ line-height: 0;`
	`38`	`+ border-top: 5px solid rgba(0, 0, 0, 0.95);`
	`39`	`+ font-size: 0;`
	`40`	`+ position: absolute;`
	`41`	`+ content: " ";`
	`42`	`+ bottom: 120%;`
	`43`	`+ width: 0;`
	`44`	`+ left: 50%;`
	`45`	`+}`
	`46`	`+`
	`47`	`+[data-tooltip]:hover:before,`
	`48`	`+[data-tooltip]:hover:after {`
	`49`	`+ visibility: visible;`
	`50`	`+ opacity: 1;`
	`51`	`+}`

Lines changed: 19 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,19 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="cs">`
	`3`	`+<head>`
	`4`	`+ <meta charset="utf-8">`
	`5`	`+ <meta name="description" content="CSS UI - Tooltip">`
	`6`	`+ <meta name="author" content="Zdeněk Papučík, zdenek.papucik@gmail.com">`
	`7`	`+ <meta name="viewport" content="width=device-width, initial-scale=1">`
	`8`	`+ <title>CSS UI - Tooltip</title>`
	`9`	`+`
	`10`	`+ <!-- CSS styles -->`
	`11`	`+ <link rel="stylesheet" href="css/style.css">`
	`12`	`+</head>`
	`13`	`+<body>`
	`14`	`+ <!-- container -->`
	`15`	`+ <div class="container">`
	`16`	`+ <a href="#" data-tooltip="Hello">Hello</a>`
	`17`	`+ </div>`
	`18`	`+</body>`
	`19`	`+</html>`

Comments

(0)