Table of Contents
OAuth Live View Tooltips
Add camera live view as an on-hover tooltip to your own application using OAuth2 authentication. This allows you to embed real-time camera feeds directly into your web application with minimal code.
Warning: This tooltip requires Bootstrap 4 and a valid OAuth2 user token. See OAuth2 integration for authentication setup.
Step 1: Add JavaScript & CSS
Add the TetherX public CDN script and CSS to your page's <head> section:
<link rel="stylesheet" href="https://my.timeline.is/cdn/tetherx.css" />
<script src="https://my.timeline.is/cdn/tetherx.js"></script>
Tip: Place these in your layout template so they're available across all pages that need tooltips.
Step 2: Add CSS Class & Attribute
Add the tetherx-live-tooltip class to any element, then add the tetherx-zone-id attribute with the target zone ID:
<button type="button" class="btn btn-secondary tetherx-live-tooltip" tetherx-zone-id="5cbdab257fe76e18f15f5c9b">
View Camera
</button>
How to find your zone ID:
- Sign in to the TetherX Platform
- Go to Admin → Cameras
- Select your camera
- Copy the zone ID from the URL or camera details
Step 3: Initialise Tooltips
After page load, execute the following JavaScript to enable tooltips:
new TetherX('user_oauth2_token').tooltips();
Warning: Replace user_oauth2_token with your actual OAuth2 access token. Never expose tokens in client-side code for production - fetch them securely from your server.
Example implementation:
<script>
document.addEventListener('DOMContentLoaded', function() {
// Fetch token from your backend API
fetch('/api/tetherx_token')
.then(response => response.json())
.then(data => {
new TetherX(data.access_token).tooltips();
});
});
</script>
Tip: The tooltip will show a live preview when users hover over elements with the tetherx-live-tooltip class. No additional configuration required.
Troubleshooting
Tooltips not appearing:
- Verify Bootstrap 4 is loaded before the TetherX script
- Check the browser console for authentication errors
- Ensure the OAuth2 token is valid and not expired
Camera not loading:
- Confirm the zone ID matches an active camera
- Verify the OAuth2 user has permission to view the zone
- Check that the camera is online and streaming