hint.css – A tooltip library in CSS

Hint.css is a tooltip library written in SASS which uses only HTML/CSS to create simple tooltips.

It does not rely on any JavaScript and rather uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips. Also it uses BEM naming convention particularly for the modifiers.

hint.css – A tooltip library in CSS.


clueTip: A jQuery Tooltip Plugin


The clueTip plugin allows you to easily show a fancy tooltip when the user’s mouse hovers over (or, optionally, clicks on) any element you designate in your script. If the element includes a title attribute, its text becomes the heading of the clueTip.

Quick Start Guide

Showing the most basic clueTip can be achieved in two easy steps.

Add HTML markup to your page for elements that you want to invoke a clueTip. By default, the clueTip plugin will use the rel attribute to load contents into the tooltip body via AHAH.

  <!-- use ajax/ahah to pull content from fragment.html: -->
  <p><a class="tips" href="fragment.html" rel="fragment.html">show me the cluetip!</a></p>

  <!-- use title attribute for clueTip contents, but don't include anything in the clueTip's heading -->
  <p><a id="houdini" href="houdini.html" title="|Houdini was an escape artist.|He was also adept at prestidigitation.">Houdini</a></p>
Include the jQuery core file and the clueTip plugin in the <head> of your document. You may optionally include the hoverIntent plugin as well. After these scripts are referenced, you can reference a custom script file to invoke your clueTips (preferred) or enter the script directly in the <head> (shown below). You should also include the clueTip stylesheet (jquery.cluetip.css) after the scripts.
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.hoverIntent.js" type="text/javascript"></script> <!-- optional -->
<script src="jquery.cluetip.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {

    splitTitle: '|'// use the invoking element's title attribute to populate the clueTip...
                     // ...and split the contents into separate divs where there is a "|"
    showTitle: false // hide the clueTip's heading
<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />

Drag ‘n’ Drop File Uploads : Dropzone.js

Dropzone.js is a JavaScript library that simplifies creating a drag ‘n’ drop file upload functionality.

It works with jQuery and works almost out-of-the-box by giving a special class name to any form.

Multiple files can be uploaded at the same time where previews of images can be displayed as well.

There are also options for defining the max file size, thumbnail dimensions (if they will be generated), enable/disable previews and more.


Opentip | The free tooltip

opentip is a javascript tooltip framework
yes – it’s free, open source and comes with different styles!


Opentip | The free tooltip.

jQuery AJAX Differences Between GET vs POST

jQuery AJAX Differences Between GET vs POST | jQuery4u.

Adding a Timepicker to jQuery UI Datepicker

Adding a Timepicker to jQuery UI Datepicker

The timepicker addon adds a timepicker to jQuery UI Datepicker, thus the datepicker and slider components (jQueryUI) are required for using any of these. In addition all datepicker options are still available through the timepicker addon.


Adding a Timepicker to jQuery UI Datepicker.

Sorting VARCHAR data in MySql

Here’s a quick tip at sorting VARCHAR type data in mysql database with values in a column.

With the default sort, it would look something like below:

mysql> SELECT column FROM table_name ORDER BY column; 


Now with “… ORDER BY column+0”, I get it sorted right:

mysql> SELECT column FROM table_name ORDER BY column+0; 


This is a quick fix instead of sorting to CAST operator.

Reference: Sorting VARCHAR data in mysql