如何在弹出窗口中隐藏尾部三角形

Question

图片 http://pasteio.com/m26f642c81452a5bf67cfc5f0b0f2390c

我正在使用传单来渲染 mapbox 地图。标记顶部有一个小三角形；我怎样才能隐藏它？

Answer 1

对于看到这篇文章的其他人，他们可能正在为工具提示三角形，甚至工具提示的背景 css 苦苦挣扎，我将我的研究放在一个地方，并找到了影响三角形和工具提示背景的各种方法。弹出窗口！

如果您将 POPUP 绑定到标记，则.leaflet-popup-tip控制三角形。我在这里隐藏它：

.leaflet-popup-tip {
    background: rgba(0, 0, 0, 0) !important;
    box-shadow: none !important;
}

如果您有添加到地图的工具提示，您可以使用这个神奇的 css 控制工具提示的三角形：

.leaflet-tooltip-top:before, 
.leaflet-tooltip-bottom:before, 
.leaflet-tooltip-left:before, 
.leaflet-tooltip-right:before {
    border: none !important;
}

更多样式： POPUP：您还可以通过定位.leaflet-popup-content-wrapper. 在这里，我完全删除了弹出窗口的背景/边框/框的所有痕迹并放大了字体：

.leaflet-popup-content-wrapper {
    background: rgba(0, 0, 0, 0) !important;
    border: none !important;
    font-size: 20px;
    box-shadow: none !important;
}

工具提示：您可以在创建工具提示时将类名添加到工具提示中，例如{className: 'popup'}，然后使用它来设置工具提示的样式：

.popup {
    background: rgba(0, 0, 0, 0) !important;
    border: none !important;
    font-size: 20px;
    box-shadow: none !important;
}

要查看如何向地图添加工具提示和弹出窗口，以及所有这些如何协同工作，这里有一个完整的注释示例：https : //repl.it/@MeowMeow/NeighboringConventionalPhp

希望这对某人有帮助！:)

Answer 2

这个三角形是由.leaflet-popup-tipcss中的类控制的。如果您使用标准的 Leaflet，您应该能够通过将以下内容添加到 css 中（leaflet.css加载后）来隐藏提示：

.leaflet-popup-tip {
    width: 0px;
    height: 0px;
  }

Mapbox 实际上以与标准 Leaflet 略有不同的方式创建提示，通过样式化元素边框而不是元素内容，所以如果您使用mapbox.js，您应该能够通过添加以下内容（mapbox.css加载后）来完成：

.leaflet-popup-tip {
    border: 0px;
  }