Custom Tooltips and Popovers in JavaScript – show-tips

show-tips is a lightweight JavaScript library that attaches dynamic, animated, customizable, themeable tooltips & popovers to elements.

Features:

• Supports HTML content.
• Uses CSS for styling and positioning.
• Uses HTML data attributes for configuration.

How to use it:

1. Load the show-tips JavaScript file in your HTML:

<script src="/dist/show-tips.min.js"></script>

2. Add the necessary CSS to your webpage. The following CSS styles cover all aspects, including positioning, themes, and animations. You can copy only the styles you need.

/* Tooltip styles */
.tooltip {
  position: fixed;
  background: var(--tooltip-bg);
  color: var(--tooltip-color);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  max-width: 20rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: opacity var(--animation-duration) ease-in-out;
}
.tooltip.visible {
  opacity: 1;
}
/* Popover styles */
.popover {
  position: fixed;
  background: var(--popover-bg);
  color: var(--popover-color);
  border: 1px solid var(--popover-border);
  padding: 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  width: 20rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: all var(--animation-duration) ease-in-out;
  transform: scale(0.95);
}
.popover.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.popover-header {
  font-weight: 600;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--popover-border);
}
.popover-body {
  line-height: 1.5;
}
/* Arrow styles */
.tooltip::before,
.popover::before {
  content: "";
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  transform: rotate(45deg);
  background: inherit;
}
[data-position="top"]::before {
  bottom: -0.375rem;
  left: 50%;
  margin-left: -0.375rem;
}
[data-position="bottom"]::before {
  top: -0.375rem;
  left: 50%;
  margin-left: -0.375rem;
}
[data-position="left"]::before {
  right: -0.375rem;
  top: 50%;
  margin-top: -0.375rem;
}
[data-position="right"]::before {
  left: -0.375rem;
  top: 50%;
  margin-top: -0.375rem;
}
.popover[data-position]::before {
  border: 1px solid var(--popover-border);
}
/* Theme variations */
.tooltip[data-theme="dark"] {
  --tooltip-bg: #1a202c;
}
.tooltip[data-theme="light"] {
  --tooltip-bg: white;
  --tooltip-color: #2d3748;
  border: 1px solid #e2e8f0;
}
.tooltip[data-theme="info"] {
  --tooltip-bg: #3182ce;
}
.tooltip[data-theme="success"] {
  --tooltip-bg: #38a169;
}
.tooltip[data-theme="warning"] {
  --tooltip-bg: #d69e2e;
}
.tooltip[data-theme="error"] {
  --tooltip-bg: #e53e3e;
}

3. Attach a tooltip to your HTML element:

<button
  data-tooltip="HTML <strong>supported</strong>"
  data-position="right"
  data-html="true"
  data-theme="info"
>

const tooltip = new TooltipManager({
  // options here
});

4. Attach a popover to your HTML element:

<button
  data-popover-title="HTML Support"
  data-popover-content="Popover with <em>HTML</em> <strong>content</strong>"
  data-position="right"
  data-html="true"
  data-width="300"
  data-close-on-click-outside="true"
>

const popover = new PopoverManager({
  // options here
});

5. All possible options to customize your tooltips and popovers.

{
  defaultPosition: "top",
  defaultTheme: "default",
  animation: true,
  html: false,
  delay: 0,
  offset: 8,
  showOnce: false,
}

6. You can also create tooltips and popovers programmatically as follows:

// Add tooltip programmatically
tooltip.create({
  target: targetElement,
  content: "This tooltip was added programmatically!",
  position: "top",
  theme: "info",
  showOnce: true,
  hideAfter: 3000,
});
// Add popover programmatically
popover.create({
  target: targetElement,
  title: "Programmatic Popover",
  content: "This popover was added using JavaScript",
  position: "bottom",
  width: 250,
  closeOnClickOutside: true,
  showOnce: true,
  hideAfter: 2000,
});