Fields with * are mandatory

Dios - Do It Open Source
 

diostip

diostip

diostip is a very lite jquery plug-in (940b), which will show a bubble with text when the mouse cursor is moved over a target.

Here is an example of a simple tooltip.
Here is a tooltip with html content.

diostip use
The text from the bubble will be taken from the title attribute of html component.
Here is an example of a simple <span class="hintClass" title="Simple tooltip">tooltip</span>.

Here is a <span class="hintClass" title="This is a multiline tooltip,<br />with some <strong>strong text</strong><br />and an unsorted<ul class='ulTooltip'><li>First item</li><li>Second item</li></ul>list.">tooltip</span> with html content.

First step is to include the plugin in page:
<script type="text/javascript" src="jquery.diostip.min.js"></script>
Then just call the plugin when the document is ready:
$(document).ready(function() {
  $('.hintClass').diostip();
});
Optional:
To customize how the tooltip will look, you can create a css class:
.mytooltip{
    border-radius:5px 5px 5px 5px;
    box-shadow:0 5px 15px #AAAAAA;
    -moz-border-radius:5px 5px 5px 5px;
    -moz-box-shadow:0 5px 15px #AAAAAA;
    border:1px solid #aaa;
    padding:5px 5px;
    color:#444;
    position:absolute;
    display:none;
    z-index:9999;
    background:#fff;
    max-width:350px;
    opacity:0.9;
    font-size:0.8em;
}
and pass it as parameter to the plugin. ex:
$(document).ready(function() {
    $('.hintClass').diostip({
       design : 'mytooltip'
   });
});
Add comment
Citation will be added automatically at the top of your message!