Adrian Price aprice
aprice
/ tooltips.css
Last active
August 29, 2015 14:04
HTML5/CSS3 tooltips. Any visible element with a data-tooltip attribute will have the value of that attribute displayed in a tooltip on hover, using only CSS.
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
| *[data-tooltip]::before | |
| { | |
| box-shadow: .3em .3em .3em rgba(0, 0, 0, 0.4); | |
| max-width: 30em; | |
| font-size: 80%; | |
| font-weight: normal; | |
| background: #ff9; | |
| color:#000; | |
| border: 1pt solid #000; | |
| padding: 0.5em; |
aprice
/ local-datetime.js
Last active
December 30, 2015 15:09
This snippet uses jQuery to replace the text of elements with data-datetime, data-date, or data-time attributes containing a JavaScript (millisecond) timestamp with local & locale date/time/datetime strings. No more asking users for locale information!
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
| /* e.g. <span data-datetime="1395760693000">2014-03-25 15:18:13</span> will be replaced with localized date/time on load */ | |
| $("[data-datetime]").each(function () { | |
| el = $(this); | |
| el.text(new Date(parseInt(el.data("datetime"))).toLocaleString()); | |
| }); | |
| /* e.g. <span data-date="1395760693000">2014-03-25</span> */ | |
| $("[data-date]").each(function () { | |
| el = $(this); | |
| el.text(new Date(parseInt(el.data("date"))).toLocaleDateString()); |