Simplest Popup Message Tooltip Plugin

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 [лучше использовать только на элементах типо span и p].

Must Read: jQuery Plugin for Creating Beautiful Tooltips | zebra_tooltips

Popup Message Tooltip jQuery Plugin

Post Name	Alert Message PWjqtooltip
Author Name	FutsalShuffle
Category	Popup Plugins, Tooltip
Official Page	Click Here
Official Website	github.com
Publish Date	November 1, 2021
Last Update	July 23, 2023
Download	Link Below
License	MIT

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. the default CSS class for the tooltip.

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

6. the 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}