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

#### Custom Tooltips

custom 6 tooltip 2

#####

This example shows how to customize the buttons tooltips with Bootstrap.

This example shows how to customize the buttons tooltips with Bootstrap. For the tooltips to work in fullscreen mode, set the container property to a selector that matches the map target.

##### main.js

    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import TileLayer from 'ol/layer/Tile.js';
    import OSM from 'ol/source/OSM.js';

    const map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: 'map',
      view: new View({
        center: [-8730000, 5930000],
        rotation: Math.PI / 5,
        zoom: 8,
      }),
    });

    document
      .querySelectorAll('.ol-zoom-in, .ol-zoom-out, .ol-rotate-reset')
      .forEach(function (el) {
        new bootstrap.Tooltip(el, {
          container: '#map',
        });
      });

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Custom Tooltips</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;
          }
        </style>
      </head>
      <body>
        <div id="map" class="map"></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": "button-title",
      "dependencies": {
        "ol": "10.9.0"
      },
      "devDependencies": {
        "vite": "^3.2.3"
      },
      "scripts": {
        "start": "vite",
        "build": "vite build"
      }
    }