Submit your widget

sample and useful tooltips effect

Created 7 years ago   Views 18413   downloads 4492    Author tooltipsy
sample and useful tooltips effect
View DemoDownload 41.5 KB
124
Share |

Introducing a jQuery tooltip plugin for control-obsessed designers.

Tooltip plugins make it too difficult to control the CSS. So I created tooltipsy to simply provide extremely efficient tooltip functionality. Tooltipsy gives you complete control over the CSS, animation, and position.

1. Install

Download tooltipsy and move tooltipsy.min.js into wherever you keep your javascript. Then include the javascript in your HTML.

<script
 type="text/javascript"
 src="/path/to/tooltipsy.min.js">
</script>

2. Style

You control the CSS. Make it look how you want. Here’s a sample to get you started.

.tooltipsy
{
    padding: 10px;
    max-width: 200px;
    color: #303030;
    background-color: #f5f5b5;
    border: 1px solid #deca7e;
}

3. Activate

The easiest setup is to add a title attribute and let tooltipsy do the work for you.

<a class="hastip" title="Show me">
<a class="hastip" title="Me too">
 
<script type="text/javascript">
$('.hastip').tooltipsy();
</script>

The article source:http://tooltipsy.com/

Tag: tooltips