https://github.com/nathco/jQuery.mousetip

Extension for cursor tooltips that follow mouse movement
https://github.com/nathco/jQuery.mousetip

Last synced: 17 days ago
JSON representation

Extension for cursor tooltips that follow mouse movement

• Host: GitHub
• URL: https://github.com/nathco/jQuery.mousetip
• Owner: nathco
• Created: 2015-05-14T22:10:08.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-08-20T13:58:31.000Z (about 8 years ago)
• Last Synced: 2024-08-01T02:29:50.192Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 86.9 KB
• Stars: 108
• Watchers: 9
• Forks: 9
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# jQuery.mousetip

Lightweight jQuery extension for creating cursor tooltips that follow mouse movement and position.

## Installation

Include the latest version of [jQuery](http://jquery.com/download) and `jQuery.mousetip.js` in the `` of your HTML document:

```html

  

```

## How to Use

Create an element with a class name `tip` and call the `mousetip()` method on the parent of said element. Modify the `x` and `y` parameters to change the tip position relative to the mouse cursor.

See the live demo: [code.nath.co/mousetip](http://code.nath.co/mousetip)

**HTML**

```html

ContentMousetip 1



ContentMousetip 2



ContentMousetip 3



```


**jQuery**

```javascript

$(function() {

    

    // Default

    $('div').mousetip('.tip');

        

    // Custom Position

    $('div').mousetip('.tip', 20, 30);

    

});

``` 

**CSS**

```css

span.tip {

    

    /* Required */

    position: absolute;

    z-index: 2;

    display: none;

    

    /* Optional */

    font-size: 15px;

    max-width: 150px;

    height: auto;

    padding: 10px;

    border-radius: 3px;

    box-shadow: 0 1px 2px #666;

    background: #FD0;

} 

```

## Feedback

If you discover any issues or have questions regarding usage, please send a message to [[email protected]](mailto:[email protected]) or find me on GitHub [@nathco](https://github.com/nathco).