Simplest Popup Message Tooltip Plugin | jQuery pwTooltip

pwTooltip is a jQuery tooltip plugin that displays a popup next to the selected element on mouseover, similar to the original browser tooltip but much more flexible.


  • Position – up, down, left, right – down default
  • customClass – You can define your own class for the tooltip – default pwtooltip tooltip
  • backgroundColor – another background color – default rgba (0, 0, 0, 0.7)

It is best used only on elements such as span and p

How to make use of it:

1. Load the jq.pwtooltip.js plugin after jQuery.

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

2. Call the function on the target element and specify the tooltip text as follows:

<button id="demo">
  Hover Me
  $('#demo').pwTooltip('Tooltip Text Here');

3. Change the position of the tooltip.

$('#demo').pwTooltip('Tooltip Text Here',{
  position: 'top',

4. Change the background color of the tooltip.

$('#demo').pwTooltip('Tooltip Text Here',{
  backgroundColor: 'rgba(255, 255, 255, 0.7)',

5. Override the default CSS class for the tooltip.

$('#demo').pwTooltip('Tooltip Text Here',{
  customClass: 'myTooltip'

6. Override default CSS styles for the tooltips.

padding:5px 15px;

Popup Message Next To Element, pwjqtooltip Plugin/Github, tooltipster

See Demo And Download

Official Website(FutsalShuffle): Click Here

This superior jQuery/javascript plugin is developed by FutsalShuffle. For extra Advanced Usage, please go to the official website.