A complete guide to implementing and customizing your tooltips.
Get up and running instantly. No external dependencies required.
Add the script right before your closing </body> tag.
<script src="fegopics-tooltip.js"></script>Add the data-tooltip attribute to any element you want to trigger.
<span data-tooltip="Hello World!" data-bg="#ffffff" data-color="#1e293b" data-offset="8">Target Element</span>See the example code on the left, and test the live preview on the right. These previews auto-display so you can easily observe their behavior.
The tooltip supports standard text or rich HTML elements (like images, bold text, and custom layouts) inside the data attribute.
data-tooltip : Content (Plain Text or HTML elements)
data-size : Sets a fixed width constraint (e.g., 250px)
Perfect for simple definitions or explaining acronyms in a paragraph.
data-tooltip="Text..."
<span class="preview-trigger"
data-tooltip="Search Engine Optimization helps your website rank higher on Google."
data-bg="#ffffff" data-color="#334155"
data-close-icon="true" data-close-color="#94a3b8"
data-offset="8"
data-pt="16px" data-pb="16px" data-pl="20px" data-pr="20px">
SEO
</span>Use full HTML inside the tooltip to display products, images, and pricing seamlessly.
data-tooltip="<div>HTML Content</div>"
<span class="preview-trigger"
data-tooltip="<div style='display:flex; gap:15px; align-items:center; margin-right:12px;'><img src='https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=100&h=100&fit=crop' style='border-radius:8px; width:60px; height:60px; object-fit:cover;' alt='Shoe'><div style='text-align:left;'><b style='font-size:16px; color:#0f172a'>Nike Air Max</b><br><span style='font-size:13px; color:#64748b'>Running Shoe</span><br><b style='color:#10b981;'>$129.99</b></div></div>"
data-bg="#f8fafc"
data-close-icon="true" data-close-color="#94a3b8"
data-offset="8"
data-pt="16px" data-pb="16px" data-pl="16px" data-pr="16px">
Buy Now
</span>Match your brand seamlessly by changing the background using Hex codes or CSS gradients.
data-bg : Background color (Hex, RGB, Gradient)
data-color : Text color (Hex, RGB)
data-shadow : Custom drop-shadow styling
Using a bold hex color to highlight a destructive or important action.
data-bg="#ef4444"
<span class="preview-trigger"
data-tooltip="<div style='margin-right:15px;'><b style='color:#fff;'>Proceed with caution</b><br><span style='font-size:13px; color:#fee2e2;'>This action cannot be undone.</span></div>"
data-bg="#ef4444" data-color="#ffffff"
data-close-icon="true" data-close-color="#ffffff"
data-offset="8"
data-pt="16px" data-pb="16px" data-pl="20px" data-pr="20px">
Delete Account
</span>Gradients flow perfectly through the dynamically clipped arrow without breaking the design.
data-bg="linear-gradient(...)"
<span class="preview-trigger"
data-tooltip="<div style='text-align:center; min-width: 160px; margin-top:8px;'><b style='font-size:16px; color:#fff;'>Unlock Pro Features</b><br><span style='font-size:13px; color:#ffe4e6;'>Get access to advanced analytics.</span></div>"
data-bg="linear-gradient(135deg, #f59e0b, #e11d48)" data-color="#ffffff"
data-close-icon="true" data-close-color="#ffffff"
data-offset="8"
data-pt="16px" data-pb="20px" data-pl="20px" data-pr="20px">
Upgrade Plan
</span>Define exactly how the user reveals the tooltip. (Note: Links and buttons inside the tooltip are automatically interactive as soon as it appears.)
data-trigger : Set to hover, click, or
show
data-close-icon : Generates an X icon for closing
data-close-color : Customizes the close icon color
Tooltips appear instantly when users hover, perfect for defining UI elements.
data-trigger="hover"
<span class="preview-trigger"
data-tooltip="This metric tracks the total number of unique visitors."
data-trigger="hover"
data-bg="#ffffff" data-color="#1e293b"
data-close-icon="true" data-close-color="#64748b"
data-offset="8"
data-pt="16px" data-pb="16px" data-pl="20px" data-pr="24px">
Unique Visitors
</span>Require a click so the tooltip stays open, allowing users to comfortably click internal links.
data-trigger="click"
<span class="preview-trigger"
data-tooltip="<div style='display:flex; flex-direction:column; gap:10px; min-width:140px; text-align:left;'><b style='padding-bottom:8px; border-bottom:1px solid #e2e8f0; color:#0f172a; margin-right:15px;'>Account Menu</b><a href='#' style='color:#475569; text-decoration:none; font-size:14px;'>Profile Settings</a><a href='#' style='color:#ef4444; text-decoration:none; font-size:14px;'>Sign Out</a></div>"
data-trigger="click"
data-bg="#f8fafc" data-color="#0f172a"
data-close-icon="true" data-close-color="#64748b"
data-offset="8"
data-pt="18px" data-pb="18px" data-pl="20px" data-pr="20px">
My Account
</span>Prevent jarring popups by adding a delay, requiring the user to intentionally rest their mouse before the tooltip appears.
data-delay : Milliseconds to wait before opening (e.g., 1500 for
1.5s)
data-autohide : Milliseconds to wait before automatically
closing
Tooltip will appear precisely 1.5 seconds after the user's mouse hovers over it.
data-delay="1500"
<span class="preview-trigger"
data-tooltip="<div style='margin-right:15px;'><b style='color:#fff; font-size:15px;'>Admin Privilege Required</b><br><span style='font-size:13px; color:#cbd5e1;'>Only owners can modify this.</span></div>"
data-trigger="hover"
data-delay="1500"
data-offset="8"
data-bg="#334155" data-color="#ffffff"
data-close-icon="true" data-close-color="#94a3b8"
data-pt="16px" data-pb="16px" data-pl="18px" data-pr="18px">
Locked Setting
</span>Automatically display the tooltip when the user scrolls the element into view. Great for onboarding flows.
data-viewport : Set true to trigger
automatically
Wait until the element enters the screen, then show the tooltip after 1.5s. If you scroll away and come back, it will trigger again!
data-viewport="true" &
data-delay="1500"
<span class="preview-trigger"
data-tooltip="<div style='border-left:3px solid #f59e0b; padding-left:12px; text-align:left; margin-right:15px;'><b style='color:#7f1d1d; font-size:14px;'>Documentation Updated</b><br><span style='font-size:13px; color:#991b1b;'>V2 endpoints deprecated.</span></div>"
data-viewport="true"
data-delay="1500"
data-offset="8"
data-bg="#fef2f2" data-color="#7f1d1d"
data-close-icon="true" data-close-color="#dc2626"
data-pt="16px" data-pb="16px" data-pl="18px" data-pr="18px">
Important API Notice
</span>Dynamically change any parameter based on screen size by adding prefixes. The script handles pointer tracking automatically, but you can override layouts per device.
phone-data-[param] : Overrides parameter below 768px
tablet-data-[param] : Overrides parameter between
768px-1024px
desktop-data-[param] : Overrides parameter above 1024px
Defaults to displaying on top, but shifts to the bottom specifically on phone screens. Resize your browser to test it.
data-pos="top" &
phone-data-pos="bottom"
<span class="preview-trigger"
data-tooltip="<b style='color:#0f172a'>Phone Shift!</b><br><span style='font-size:13px; color:#475569;'>Resize your browser to see the shift.</span>"
data-pos="top" phone-data-pos="bottom"
data-bg="#ffffff" data-color="#0f172a"
data-close-icon="true" data-close-color="#64748b"
data-offset="8"
data-pt="16px" data-pb="16px" data-pl="20px" data-pr="20px">
Responsive Placement
</span>This tooltip is normally plain white, but applies a blue theme exclusively for tablet users.
data-bg="#ffffff" &
tablet-data-bg="#dbeafe"
<span class="preview-trigger"
data-tooltip="<b>Tablet Style!</b><br><span style='font-size:13px;'>White default, Blue on tablets.</span>"
data-bg="#ffffff" data-color="#0f172a"
tablet-data-bg="#dbeafe" tablet-data-color="#1e3a8a"
data-close-icon="true"
data-close-color="#64748b" tablet-data-close-color="#3b82f6"
data-offset="8"
data-pt="16px" data-pb="16px" data-pl="20px" data-pr="20px">
Responsive Colors
</span>Control internal spacing (top, bottom, left, right) to perfectly frame custom HTML structures.
data-pt : Top padding
data-pb : Bottom padding
data-pl : Left padding
data-pr : Right padding
We added a massive 80px top padding (data-pt="80px") to cleanly
push the profile text down and create visual empty space above the avatar.
data-pt="80px"
<span class="preview-trigger"
data-tooltip="<div style='text-align:center;'><img src='https://i.pravatar.cc/50?img=11' style='border-radius:50%; display:block; width:46px; height:46px; margin:0 auto 10px auto;' alt='Avatar'><b style='color:#0f172a; font-size:16px;'>Alex Smith</b><br><span style='color:#64748b; font-size:13px;'>Lead UX Designer</span></div>"
data-pos="bottom" data-offset="12"
data-bg="#ffffff" data-color="#0f172a"
data-close-icon="true" data-close-color="#94a3b8"
data-pt="80px" data-pb="20px"
data-pl="40px" data-pr="40px">
View Author
</span>Creating 80px of empty space at the bottom (data-pb="80px")
separates descriptive text from an absolute-positioned "Read More" action link.
data-pb="80px"
<span class="preview-trigger"
data-tooltip="<div style='text-align:left; min-width:200px;'><b style='color:#0369a1; margin-right:15px;'>Web Vitals Guide</b><br><span style='font-size:13px; color:#0c4a6e; display:block; margin-top:4px;'>Learn how to optimize your site.</span><div style='position:absolute; bottom:15px; left:18px;'><span style='color:#0284c7; font-weight:600; font-size:13px;'>Read Full Article →</span></div></div>"
data-offset="8"
data-bg="#f0f9ff" data-color="#0369a1"
data-close-icon="true" data-close-color="#0284c7"
data-pt="18px" data-pb="80px"
data-pl="18px" data-pr="18px">
Learn More
</span>Adjust the external gap between the target element and the tooltip's arrow to prevent visual overlapping or to create elegant breathing room.
data-offset : Distance from target element in pixels (Default:
12)
Setting a low offset pulls the tooltip right up to the trigger word.
data-offset="2"
<span class="preview-trigger"
data-tooltip="Notice how close the arrow is to the text!"
data-offset="2"
data-bg="#ffffff" data-color="#1e293b"
data-close-icon="true" data-close-color="#94a3b8"
data-pt="12px" data-pb="12px" data-pl="16px" data-pr="16px">
Close Gap
</span>A much larger offset pushes the tooltip high above the content.
data-offset="30"
<span class="preview-trigger"
data-tooltip="Lots of room to breathe."
data-offset="30"
data-bg="#ffffff" data-color="#1e293b"
data-close-icon="true" data-close-color="#94a3b8"
data-pt="12px" data-pb="12px" data-pl="16px" data-pr="16px">
Large Gap
</span>Solve overlapping issues instantly. If your site uses sticky navigation bars or full-screen modals with high z-indices, default tooltips might hide behind them. Control the depth dynamically per-element.
data-z : Custom z-index value (Default: 99999)
If your modal wrapper has a z-index of 100000, you can simply
push this specific tooltip to 100005 without writing a single line of custom CSS.
data-z="100005"
<!-- Example of a tooltip pushed to the absolute front -->
<span class="preview-trigger"
data-tooltip="This will appear over your modal."
data-z="100005"
data-bg="#ffffff" data-color="#1e293b"
data-offset="8"
data-pt="12px" data-pb="12px" data-pl="16px" data-pr="16px">
Modal Button
</span>You can suggest the primary position of the tooltip (top, bottom,
left, or right).
Note on Smart Fallback: If you
suggest top but the user scrolls too close to the top edge of the browser, the script
will automatically flip the tooltip to bottom to keep it fully visible.
data-pos : Primary placement priority (top | bottom | left |
right)
The default behavior. Tooltip appears above the target element.
data-pos="top"
<span class="preview-trigger"
data-tooltip="Standard Top Placement."
data-pos="top"
data-bg="#ffffff" data-color="#1e293b"
data-close-icon="true" data-close-color="#94a3b8"
data-offset="12"
data-pt="12px" data-pb="12px" data-pl="16px" data-pr="16px">
Point Up
</span>Forces the tooltip to spawn below the element.
data-pos="bottom"
<span class="preview-trigger"
data-tooltip="Standard Bottom Placement."
data-pos="bottom"
data-bg="#ffffff" data-color="#1e293b"
data-close-icon="true" data-close-color="#94a3b8"
data-offset="12"
data-pt="12px" data-pb="12px" data-pl="16px" data-pr="16px">
Point Down
</span>