How to Show Tooltips on Cesium Entities (Aircraft Example)

/ Cesium, Simulation

When working with 3D geospatial visualizations in CesiumJS, adding a Cesium entity tooltip is a great way to display information such as aircraft type, speed, and altitude. In this guide, we’ll show you how to build an aircraft tooltip that appears on hover in a CesiumJS globe.

In this blog, we’ll walk through an example of how to implement tooltips for aircraft entities in CesiumJS, so users can hover their mouse over an aircraft and immediately see key data.

Why Tooltips are Useful

  • Better user experience – Tooltips let users quickly access entity details without cluttering the interface.
  • Real-time tracking – Especially useful in aircraft tracking, radar simulations, or logistics monitoring.
  • Interactive insights – Users can explore entities dynamically, improving situational awareness.

For example, in an air traffic visualization, hovering over an aircraft can show its name, classification, speed, and altitude in real time.

Implementation

First, we define a tooltip container in HTML:

<!-- Tooltip container -->
<div id="aircraftTooltip" 
     style="position:absolute; background:#fff; padding:8px; border:1px solid #ccc; border-radius:6px; display:none; pointer-events:none; font-family:sans-serif; font-size:13px; box-shadow:0 2px 6px rgba(0,0,0,0.2);">
</div>

<!-- Mouse location display -->
<div id="mouseLocation" style="position:absolute; bottom:10px; left:10px; background:#222; color:#fff; padding:4px 8px; border-radius:4px; font-size:12px;"></div>

Next, add the JavaScript logic to show aircraft details on mouse hover:

// Get tooltip container
const tooltip = document.getElementById('aircraftTooltip');

// Mouse move handler
handler.setInputAction((movement) => {
  const cartesian = viewer.scene.pickPosition(movement.endPosition);
  const mouseLocation = document.getElementById("mouseLocation");

  // Show current mouse location (Lat/Lon/Elevation)
  if (Cesium.defined(cartesian)) {
    const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    const lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5);
    const lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);
    const height = cartographic.height.toFixed(2);
    mouseLocation.innerText = `Lat: ${lat}, Lon: ${lon}, Elevation: ${height} m`;
  } else {
    mouseLocation.innerText = `Lat: -, Lon: -, Elevation: -`;
  }

  // Pick entity under cursor
  const picked = viewer.scene.pick(movement.endPosition);
  if (Cesium.defined(picked) && picked.id && picked.id.name && picked.id.position) {
    const ac = aircrafts.find(a => a.id === picked.id.id);
    if (ac) {
      const canvasPos = movement.endPosition;
      tooltip.style.left = (canvasPos.x + 15) + 'px';
      tooltip.style.top = (canvasPos.y + 15) + 'px';
      tooltip.style.display = 'block';

      tooltip.innerHTML = `
        ✈️ <strong>${ac.name}</strong><br>
        ${ac.classification}<br>
        Speed: ${ac.speed.toFixed(0)} km/h<br>
        Alt: ${ac.alt.toFixed(0)} m
      `;
    }
  } else {
    tooltip.style.display = 'none';
  }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

Output

With this setup, whenever you hover over an aircraft entity in the Cesium globe:

  • A tooltip appears near the mouse cursor.
  • It shows aircraft name, classification, speed, and altitude.
  • Tooltip hides when not hovering over an aircraft.

This approach ensures your Cesium visualization remains clean, interactive, and informative.

Conclusion

Tooltips are a simple but powerful way to enhance the usability and interactivity of Cesium-based applications. Whether you are working on real-time radar displays, mission planning tools, or air traffic visualization systems, showing contextual information on hover can dramatically improve user experience.

At Manya Technologies, we specialize in custom GIS and simulation applications using CesiumJS, QGIS, Qt, and C++. If your organization is looking to build interactive 3D geospatial tools with features like tooltips, real-time data display, and advanced visualization—
📩 Contact us today to discuss your project.

Check out live demo of aircraft simulation using cesium.

Scroll to Top