<!-- Include after Vue -->
<script src="vue-bing-maps/dist/vue-bing-maps-0.0.1.js"></script>
<script>
  Vue.use(VueBingMaps.default);
</script> 

    <style>
        .customInfobox {
            background-color: rgba(0,0,0,0.5);
            color: white;
            max-width: 200px;
            border-radius: 10px;
            padding: 10px;
            font-size:12px;
            pointer-events:auto !important;
        }
    </style> 
 
<bing-map :credentials="mapCredentials" :options="mapOptions" v-if="mapVisible">
    <bing-map-layer name="activeFlightsLayer" 
                    v-on:layer-click="handleEvent" 
                    v-on:layer-mouseover="showTooltip" 
                    v-on:layer-mouseout="hideTooltip"
                    :visible="pinsVisible">
        <bing-map-pushpin v-for="item in pins" :metadata="item.metadata" :location="item.location" :options="item.options"></bing-map-pushpin>
        <bing-map-infobox :options="tooltip">
            <div class="customInfobox">{{tooltip.description}}</div>
        </bing-map-infobox>
    </bing-map-layer>
</bing-map>