Customize Tooltip/Popup css for `<wpt>` elements when displayed on map

[haldo98]

I'm having some issues with the css that displays waypoint in a gpx. Here's the demo: https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_gpx-waypoints.html

I'd love to have a different style and I managed to change the css according to my needs: But no matter how I try the content of the tag <name> of the wpt's gpx ,even if it's empty, it's always on top.

I want it below the img and the img must be close to the border... https://www.tadini.it/temp/aaa/mappa_boletto.html

Any hint?

my css:

.elevation-tooltip.leaflet-tooltip,
.elevation-popup .leaflet-popup-content {
  position: absolute;
  padding: 0px;
  background-color: rgba(61, 61, 61, 1);
  border: 3px solid #fff;
  border-radius: 4px;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  width: 200px !important;
}

.elevation-tooltip>,
.elevation-popup .leaflet-popup-content .wpt-link-image img> {
  position: absolute;
  padding: 0px;
  height: 100%;
  width: 200px;
  max-height: 200px;
}

.elevation-popup .leaflet-popup-content {
  position: absolute;
  padding: 0px;
  background-color: rgba(61, 61, 61, 1);
  border: 3px solid #fff;
  border-radius: 4px;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  width: 200px !important;
}

.elevation-tooltip .wpt-desc,
.elevation-popup .leaflet-popup-content .wpt-desc {
  position: absolute;
  margin-top: 5px;
  padding-top: 10px;
  color: #454687;
  text-align: justify;
}

[Raruto]

Hi @haldo98,

you have some malformed css:

.elevation-tooltip > /* ← invalid immediate child selector */,
.elevation-popup .leaflet-popup-content .wpt-link-image img > /* ← invalid immediate child selector */{
  position: absolute;
  padding: 0px;
  height: 100%;
  width: 200px;
  max-height: 200px;
}

👋 Raruto

[Raruto]

But no matter how I try the content of the tag of the wpt's gpx ,even if it's empty, it's always on top.

I want it below the img and the img must be close to the border...

If you mean have the title after the image, it should be something like the following:

.elevation-tooltip.leaflet-tooltip,
.elevation-popup .leaflet-popup-content {
  display: flex;
  flex-direction: column;
} 

.elevation-tooltip.leaflet-tooltip > b,
.elevation-popup .leaflet-popup-content > b {
  order: 1;
}

/*
.elevation-tooltip.leaflet-tooltip > * {
order: ..
}
*/

[haldo98]

Thank You.. I'll try with your suggestions....