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.

Settings:

  • 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
</button>
$(function(){
  $('#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.

position:absolute;
padding:5px 15px;
background:${config.backgroundColor};
color:white;
border-radius:10px;
visibility:hidden;
opacity:0" 
class="${config.customClass}

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.

Share