This example uses OpenLayers v10.9.0. The latest is v.
Edit

#### Earthquakes in KML

KML 9 vector 86 style 27 tooltip 2

#####

Demonstrates the use of a Shape symbolizer to render earthquake locations.

This example parses a KML file and renders the features as a vector layer. The layer is given a `style` that renders earthquake locations with a size relative to their magnitude.

##### main.js

    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import KML from 'ol/format/KML.js';
    import TileLayer from 'ol/layer/Tile.js';
    import VectorLayer from 'ol/layer/Vector.js';
    import StadiaMaps from 'ol/source/StadiaMaps.js';
    import VectorSource from 'ol/source/Vector.js';
    import CircleStyle from 'ol/style/Circle.js';
    import Fill from 'ol/style/Fill.js';
    import Stroke from 'ol/style/Stroke.js';
    import Style from 'ol/style/Style.js';

    const styleCache = {};
    const styleFunction = function (feature) {
      // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
      // standards-violating <magnitude> tag in each Placemark.  We extract it from
      // the Placemark's name instead.
      const name = feature.get('name');
      const magnitude = parseFloat(name.substr(2));
      const radius = 5 + 20 * (magnitude - 5);
      let style = styleCache[radius];
      if (!style) {
        style = new Style({
          image: new CircleStyle({
            radius: radius,
            fill: new Fill({
              color: 'rgba(255, 153, 0, 0.4)',
            }),
            stroke: new Stroke({
              color: 'rgba(255, 204, 0, 0.2)',
              width: 1,
            }),
          }),
        });
        styleCache[radius] = style;
      }
      return style;
    };

    const vector = new VectorLayer({
      source: new VectorSource({
        url: 'data/kml/2012_Earthquakes_Mag5.kml',
        format: new KML({
          extractStyles: false,
        }),
      }),
      style: styleFunction,
    });

    const raster = new TileLayer({
      source: new StadiaMaps({
        layer: 'stamen_toner',
      }),
    });

    const map = new Map({
      layers: [raster, vector],
      target: 'map',
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });

    const info = document.getElementById('info');
    info.style.pointerEvents = 'none';
    const tooltip = new bootstrap.Tooltip(info, {
      animation: false,
      customClass: 'pe-none',
      offset: [0, 5],
      title: '-',
      trigger: 'manual',
    });

    let currentFeature;
    const displayFeatureInfo = function (pixel, target) {
      const feature = target.closest('.ol-control')
        ? undefined
        : map.forEachFeatureAtPixel(pixel, function (feature) {
            return feature;
          });
      if (feature) {
        info.style.left = pixel[0] + 'px';
        info.style.top = pixel[1] + 'px';
        if (feature !== currentFeature) {
          tooltip.setContent({'.tooltip-inner': feature.get('name')});
        }
        if (currentFeature) {
          tooltip.update();
        } else {
          tooltip.show();
        }
      } else {
        tooltip.hide();
      }
      currentFeature = feature;
    };

    map.on('pointermove', function (evt) {
      if (evt.dragging) {
        tooltip.hide();
        currentFeature = undefined;
        return;
      }
      displayFeatureInfo(evt.pixel, evt.originalEvent.target);
    });

    map.on('click', function (evt) {
      displayFeatureInfo(evt.pixel, evt.originalEvent.target);
    });

    map.getTargetElement().addEventListener('pointerleave', function () {
      tooltip.hide();
      currentFeature = undefined;
    });

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Earthquakes in KML</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="node_modules/ol/ol.css">
        <style>
          .map {
            width: 100%;
            height: 400px;
          }
          #map {
            position: relative;
          }
          #info {
            position: absolute;
            height: 1px;
            width: 1px;
            z-index: 100;
          }
          .tooltip.in {
            opacity: 1;
          }
          .tooltip.top .tooltip-arrow {
            border-top-color: white;
          }
          .tooltip-inner {
            border: 2px solid white;
          }
        </style>
      </head>
      <body>
        <div id="map" class="map">
          <div id="info"></div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
        <script type="module" src="main.js"></script>
      </body>
    </html>

##### package.json

    {
      "name": "kml-earthquakes",
      "dependencies": {
        "ol": "10.9.0"
      },
      "devDependencies": {
        "vite": "^3.2.3"
      },
      "scripts": {
        "start": "vite",
        "build": "vite build"
      }
    }