sachleenblogprojectsabout me

CSS-only Tooltips

Demo

Move your mouse over the links in the text below to see the tooltips in action.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

The tooltips are not limited to links and can be applied to any element. For example, last word in the text above is wrapped in a <span> tag and has a tooltip.

Source

CSS

.tooltip:hover:after {
    content:attr(tip);
    position: absolute;
    display: inline;
    padding: 0 5px;
    margin-left: 5px;
    max-width: 400px;
    background: #111;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    color: #FFF;
    font-size: 14px;
    font-weight: normal;
    text-shadow: 0 1px 0 #000;
}

HTML

<a href="#" class="tooltip" tip="CSS Tooltip Demo">Link Text</a>

Compatibility

I can confirm this works in Chrome 18, Firefox 7, and Internet Explorer 9.

Final Notes

I opted not to use the title attribute because it was annoying to see both the default tooltip as well as my custom one. This means that older browsers in which this does not work cannot fall back to anything. You can change the attribute on the first line of the CSS (content:attr(tip);) if you'd like.

Dropbox Uploader and Screenshot Utility with AutoHotkey

DBUpload

Update (Jan 14, 2012) I've released an updated version that copies short URLs (uses http://is.gd) to the clipboard. See below for details.

I've developed a couple of AutoHotkey scripts that allow you to quickly upload files and screenshots to Dropbox. This is my alternative to Droplr, an application that I've been using for a long time (originally Windroplr) but have never been happy with.

There are two independent scripts, DBScreenshot and DBUpload. DBScreenshot is a tool that allows you to select a rectangular region of the screen and saves the screenshot to the Dropbox Public folder. The URL to the screenshot is then copied to the clipboard. Similarly, DBUpload uploads files that drag-and-drop into a drop box that pops up on the screen. You can even upload multiple files at once and have all of the URLs copied to the clipboard.

How easy is that?

Usage

I have the following shortcuts setup in my AHK Keyboard Shortcuts script:

;DBScreenshot and DBUpload
PRINTSCREEN:: run %A_ScriptDir%\DBUpload\DBScreenshot.exe
#w:: run %A_ScriptDir%\DBUpload\DBUpload.exe

This maps the PrintScreen button to DBScreenshot and Win+W to DBUpload.

If you do not already have a script for such shortcuts, I've included one in the download. Simply run Shortcuts.exe and these shortcuts will work for you.

Download

DBUpload

Includes compiled binaries and source.

Configuration

Before you can use DBUpload, you have to set some values in the settings.ini file.

User ID

First head over to your Public Folder. Select a file and from the menu click on Copy Public Link. You will see a URL that looks something like http://dl.dropbox.com/u/33076/... The series of numbers is your User ID.

Public Folder Location

Next, browse your Dropbox folder on your computer and copy the path to the Public folder.

Your settings.ini file should look something like this:

[Config]
UserId=33076
PublicFolder=C:\Users\Sachleen Sandhu\Dropbox\Public
ShortenUrls=true

Note: PublicFolder does not have a trailing slash.

If set to true, ShortenUrls paramater causes the script to shorten the public URLs using http://is.gd before copying them to the clipboard.

New Tab Widgets

New Tab Widgets (NTW) is a Google Chrome extension that allows you to customize the new tab page with widgets. This wiki includes guides for developing widgets as well as a list of widgets people have created for NTW.

NTW

Links

NTW on the Chrome Web Store

Have an idea? Share it here.

Widget Development Guide

Available Widgets

License

This is free and unencumbered software released into the public domain.

Anyone is free to copy, modify, publish, use, compile, sell, or
distribute this software, either in source code form or as a compiled
binary, for any purpose, commercial or non-commercial, and by any
means.

In jurisdictions that recognize copyright laws, the author or authors
of this software dedicate any and all copyright interest in the
software to the public domain. We make this dedication for the benefit
of the public at large and to the detriment of our heirs and
successors. We intend this dedication to be an overt act of
relinquishment in perpetuity of all present and future rights to this
software under copyright law.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

For more information, please refer to <http://unlicense.org/>