Minimal Fast jQuery HTML5 Tooltip Plugin

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.

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.

  • Publication date: 17.11.2017
  • Source