Tooltip Demo

by meeps

HTML

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
  <div id='map'>
      <div id='tooltip' class='tooltip'>
        <h3>Jefferson Pier Stone</h3>
      </div>
  </div>
   <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
  <script src='https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js'></script>
</body>
</html>

CSS

body {
   font: 18px -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
}
*, *:before, *:after {
  box-sizing: border-box;
}
body {
  margin: 0px;
  overflow-y: hidden;
}
#map {
  width: 100vw;
  height: 100vh;
  background-color: #772524;
}
.tooltip {
  display: block;
  position: relative;
  background-color: rgba(243, 244, 239, 0.6);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
}

.tooltip h3 {
  margin: 0px;
}
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: rgba(243, 244, 239, 0.6) transparent transparent transparent;
}

JavaScript

let Map = ol.Map,
  View = ol.View,
  GeoJSON = ol.format.GeoJSON,
  VectorImageLayer = ol.layer.VectorImage,
  VectorLayer = ol.layer.Vector,
  VectorSource = ol.source.Vector,
  Style = ol.style.Style,
  Fill = ol.style.Fill,
  Stroke = ol.style.Stroke,
  Text = ol.style.Text,
  Tile = ol.layer.Tile,
  OSM = ol.source.OSM,
  Select = ol.interaction.Select,
  Click = ol.events.condition,
  CircleStyle = ol.style.Circle;
  
let map = new Map({
	target: 'map',
  layers: [
  	new Tile({
    	source: new OSM({
      	crossOrigin: 'anonymous'
      })
    })
  ],
  controls: [],
  view: new View({
  	center: ol.proj.fromLonLat([-77.036652, 38.8897506]),
    zoom: 18
  })
});

let tooltipOverlay = new ol.Overlay({
	element: document.getElementById('tooltip'),
	offset: [0, -20],
  positioning: 'bottom-center',
  position: ol.proj.fromLonLat([-77.036652, 38.8897506])
});

map.addOverlay(tooltipOverlay);