Minimal Fast jQuery HTML5 Tooltip Plugin

A lightweight, blazing fast jQuery tooltip plugin which works with HTML5 data attribute and is easy to style using your own CSS styles.

How to use it:

1. The necessary CSS styles. Modify and override the rules as displaye below and then add them to your existing CSS file.

.tooltip { text-decoration: underline; }

.tooltip-window {
  display: none;
  position: fixed;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: 1px;
  font-weight: normal;
  word-wrap: break-word;
  word-break: break-all;
  max-width: 350px;
  min-width: 100px;
  max-height: 400px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  padding: 1rem;
  margin-top: 1rem;
  margin-left: 1rem;
  box-shadow: 0 0 60px rgba(0,0,0,0.3);
}

.tooltip {
  font-weight: bold;
  font-style: italic;
}

.tooltip[data-tooltip-type="primary"] {
  color: #2979ff; /* fallback */
  color: rgb(41, 121, 255);
}

.tooltip[data-tooltip-type="success"] {
  color: #0f9d58; /* fallback */
  color: rgb(15, 157, 88);
}

.tooltip[data-tooltip-type="info"] {
  color: #00b0ff; /* fallback */
  color: rgb(0, 176, 255);
}

.tooltip[data-tooltip-type="warning"] {
  color: #ff8f00; /* fallback */
  color: rgb(255, 143, 0);
}

.tooltip[data-tooltip-type="danger"] {
  color: #e91e63; /* fallback */
  color: rgb(233, 30, 99);
}

@media (max-width: 768px) {

.tooltip-window { margin-top: 25px; }

}

2. Set the tooltip content & theme using data attributes as follows:

<span class="tooltip" 
      data-tooltip="Primary Tooltip" 
      data-tooltip-type="primary">
      Primary tooltip
</span>

<span class="tooltip" 
      data-tooltip="Success Tooltip" 
      data-tooltip-type="success">
      Success tooltip
</span>

<span class="tooltip" 
      data-tooltip="Info Tooltip" 
      data-tooltip-type="info">
      Info tooltip
</span>

<span class="tooltip" 
      data-tooltip="Danger Tooltip" 
      data-tooltip-type="danger">
      Danger tooltip
</span>

<span class="tooltip" 
      data-tooltip="Warning Tooltip" 
      data-tooltip-type="warning">
      Warning tooltip
</span>

3. Create an empty container for the tooltips.

<p class="tooltip-window"></p>

4. Put jQuery JavaScript library and the main JavaScript file at the bottom of the web page. Done.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/index.js"></script>

---

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