Animated Rich-text Tooltip & Popover Plugin - jQuery serialtip

Tooltips and popovers are two very commonly used, customizable, interactive visual elements in creating websites and web applications. They use mouse interactions to display information or trigger certain events on user interface components.

serialtip is a lightweight jQuery plugin for easily creating animated, customizable, rich-text tooltips and popovers that appear on-hover or on-click, on any HTML element.

How to use it:

1. Load jQuery library and the serialtip plugin's files in the document.

<link rel="stylesheet" href="/path/to/dist/jquery.serialtip.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.serialtip.min.js"></script>

2. Add your content to a DIV container. Note that each tooltip or popover must have an unique ID defined using the data-serialtip-target attribute.

<div data-serialtip-target="example" class="serialtip-default">
  <!-- Close Button -->
  <span class="serialtip-close"></span>
  <h5 class="serialtip-title">Tooltip/Popover Title</h5>
  <p>Tooltip/Popover Content</p>
</div>

3. Attach the tooltip/popover to the element you specify.

<span data-serialtip="example">
  Hover/Click Me
</span>

4. Initialize the plugin as a popover.

$(function(){
  $('[data-serialtip]').serialtip();
});

5. Initialize the plugin as a tooltip.

$(function(){
  $('[data-serialtip]').serialtip({
    event: 'hover',
  });
});

6. Create your own themes.

.serialtip-custom {
  padding: 30px;
  background-color: #fff;
  box-shadow: 5px 5px 35px 5px rgba(0, 0, 0, .1);
  font-size: 14px;
  color: #666;
}

.serialtip-custom:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: solid transparent;
}

.serialtip-custom.is-placement-bottom:before {
  bottom: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 0 6px 6px 6px;
  border-bottom-color: #fff;
}

<div data-serialtip-target="example" class="serialtip-custom">
  <!-- Close Button -->
  <span class="serialtip-close"></span>
  <h5 class="serialtip-title">Tooltip/Popover Title</h5>
  <p>Tooltip/Popover Content</p>
</div>

7. Set the position of the tooltip.

• top / left
• top / center
• top / right
• right / top
• right / center
• right / bottom
• bottom / left
• bottom / center
• bottom / right
• left / top
• left / center
• left / bottom

$(function(){
  $('[data-serialtip]').serialtip({
    position: 'bottom center', // default
  });
});

8. Set time to wait before triggering the tooltip/popover. Default: 300ms.

$(function(){
  $('[data-serialtip]').serialtip({
    delay: 100,
  });
});

9. More plugin options.

$(function(){
  $('[data-serialtip]').serialtip({

    // CSS class for close button
    closeClass: 'serialtip-close',

    // CSS class for active tooltip/popover
    activeClass: 'is-active',

    // Function to get the target tooltip/popover 
    getTarget: function($trigger){
      const target = $trigger.data('serialtip');
      return $('[data-serialtip-target="'+ target +'"]');
    }

  });
});

---

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