Question: I have the script to show markers on the map

Here is the code of it

> 
> <https://codepen.io/suhomlineugene/pen/mKoaxb>
> 
> 
> 

I need to show popup on marker hover

I tried to do it like this for example, so it needs to works on Ibis London Barking hotel.

But it not works

```
map.on('mouseover', 'Ibis London Barking', function(e) {
      alert("Hover");
    });

```

Official docs say that I need code like this

```
 map.on('mouseenter', 'places', function(e) {******}):

```

But they add markers from `addLayer()` and I not. How Ic an solve this issue?

Answer: 
Possible solution is to add that needed layer.. like [this](https://codepen.io/anon/pen/NzJJYV)

*I slightly changed your code to generate a similar layer object as shown in [the example from the docs](https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/)* 

```
map.on("load", function() {

const starImage = '<img class="star-image" style="height:20px;width:20px;">';

const layer = {
  "id": "places",
  "type": "symbol",
  "layout": {
    "icon-image": "{icon}-15",
    "icon-allow-overlap": true
  },
  "source": {
    "type": "geojson",
    "data": {
      "type": "FeatureCollection",
      "features": json.map(function(item){
        return {
          "type": "Feature",
          "properties": {
            "description": `<div class="map-card__wrapper">
                              <div class="map-card__image-container">
                              <div class="map-card__image" style="background: url(${item.pictures[0].url});"></div>
                            </div>
                            <div class ="map-card__content-container ">
                              <div class ="map-card__title">${item.name}</div>
                                <p class="map-card__address">${item.address1}</p>
                                <div class ="map-card__review">${starImage.repeat(item.rating)}</div>
                              </div>
                            </div>`,
            "icon": "star" //probably want to change
          },
          "geometry": {
            "type": "Point",
            "coordinates": [item.lng, item.lat]
          }
        }
      })
    }
  }
};

map.addLayer(layer);

var popup = new mapboxgl.Popup({
  closeButton: false,
  closeOnClick: false,
  offset: 5
});

map.on('mouseenter', 'places', function(e) {
  console.log(e)
  // Change the cursor style as a UI indicator.
  map.getCanvas().style.cursor = 'pointer';

  var coordinates = e.features[0].geometry.coordinates.slice();
  var description = e.features[0].properties.description;

  // Ensure that if the map is zoomed out such that multiple
  // copies of the feature are visible, the popup appears
  // over the copy being pointed to.
  while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
    coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
  }

  // Populate the popup and set its coordinates
  // based on the feature found.
  popup.setLngLat(coordinates)
    .setHTML(description)
    .addTo(map);
});

map.on('mouseleave', 'places', function() {
  map.getCanvas().style.cursor = '';
  popup.remove();
});
});

```
Try this:

```
    map.on('load', function() {

  // Create a popup
  var popup = new mapboxgl.Popup({
    closeButton: false,
    closeOnClick: false
  });

  function showPopup(e) {
    // Change the cursor
    map.getCanvas().style.cursor = 'pointer';

    // Show the popup
    popup.setLngLat(e.features[0].geometry.coordinates)
      .setHTML(checkEmpty(e.features[0].properties.name))
      .addTo(map);
  }

  function hidePopup() {
    map.getCanvas().style.cursor = '';
    popup.remove();
  }

  function checkEmpty(info) {
    return (info) ? info : "No data";
  }

   map.on('mouseenter', 'places', showPopup);
   map.on('mouseleave', 'places', hidePopup);
});

```