Created
January 27, 2012 16:03
-
-
Save colourgarden/1689489 to your computer and use it in GitHub Desktop.
txtQry - CSS snippet for highlighting and annotating text queries during the website development stage via tooltips.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* == txtQry CSS | |
| ========================================================================================================= */ | |
| [data-txtQry]{position: relative; background: #f3961c; cursor: help; padding: 2px;} | |
| [data-txtQry]:after, [data-txtQry]:before{display: none; position: absolute;} | |
| [data-txtQry]:after{top: -31px; width: auto; height: 24px; line-height: 23px; content: attr(data-txtQry); padding: 0 10px; white-space: nowrap; word-wrap: normal; font-size: 0.85em; border-radius: 0.3em; background: #222; color: #fff;} | |
| [data-txtQry]:before{top: -7px; left: 10px; content: ""; border-width: 7px 7px 0; border-style: solid; border-color: #222 transparent;} | |
| [data-txtQry]:hover:before, [data-txtQry]:hover:after{display: block;} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| txtQry - clever highlights for text queries. | |
| <span data-txtQry="This texts needs some attention!">Lorem ipsum dolor sit amet</span> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment