Rich Text Tooltip That Follow Your Mouse - jqTip

A super tiny jQuery tooltip plugin to display any HTML content in a hover-triggered tooltip popup that automatically adjusts the position relative to the cursor on mouse move.

See Also:

• Custom Tooltip Follows Mouse Cursor - jQuery YACSSTooltip
• JavaScript Library For Mouse Follow Tooltips – mousetip.js
• jQuery Plugin To Create Tooltips That Follow Mouse - mousetip

How to use it:

1. Download and place the JavaScript file 'jquery.jqTip.js' after jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/jquery.jqTip.js"></script>

2. Attach the function 'jqTip' to the target element and define the title & content for the tooltip.

<div id="example">
  ... Hover Me ...
</div>

<div id="example">
  ... Hover Me ...
</div>

2. Attach the function 'jqTip' to the target element and define the title & content for the tooltip.

$(function(){
  $("#example").jqTip({
    title:"Tooltip Title",
    content:"A super tiny jQuery <b>tooltip</b> plugin to display any HTML content in a hover-triggered tooltip popup which always follows the cursor on mouse move."
  });
})

3. Specify the size (width/height) of the tooltip popup. Default: 200/100.

$(function(){
  $("#example").jqTip({
    title: "Tooltip Title",
    content: "A super tiny jQuery <b>tooltip</b> plugin to display any HTML content in a hover-triggered tooltip popup which always follows the cursor on mouse move.",
    height: 'auto',
    width: 300
  });
})

4. Apply CSS styles to the tooltip.

.jq-tip-dialog{
  position: absolute;
  background-color: rgb(92, 176, 223);
  display: none;
  border-radius: 4px;
}

.jq-tip-dialog h1{
  margin: 0;
  padding: 0;
  font-size: 15px;
  color: #fff;
  padding: 5px 0 5px 5px;
}

.jq-tip-dialog .wrapper{
  padding: 0 3px 3px 3px;
}

.jq-tip-dialog .wrapper > div{
  background-color: rgb(246, 246, 246);
}

.jq-tip-dialog .wrapper > div .jq-tip-content{
  padding: 5px;
  margin: 0;
  font-size: 14px;
  overflow-y: auto;
  word-wrap: break-word;
}

---

This awesome jQuery plugin is developed by CJ-Zheng1023. For more Advanced Usages, please check the demo page or visit the official website.