Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
898
Tooltip behind map
posted

Hello experts,

I have a map close to your samples

$("#dataMap").igMap({
            width: "100%",
            height: "94%",
            border: 0,
            //overviewPlusDetailPaneVisibility: "visible",
            windowRect:
       {
           left: 0,
           top: 0.2,
           width: 0.5,
           height: 0.5
       },

            backgroundContent: {
                type: "openStreet"
            },
            series: [{
                type: "geographicSymbol",
                name: "ChangeDB Cities",
                dataSource: currentResult, //JSON Array defined above    
                latitudeMemberPath: "Latitude",
                longitudeMemberPath: "Longitude",
                markerOutline: "#b51c1c",
                markerBrush: "#b51c1c",
                showTooltip: true,
                tooltipTemplate: "

" +                                 "" +                                 "" +                                 "" +                                 "

${item.Office}, ${item.Country}
Web: ${item.Web}
Access: ${item.Access}

",
   
            }],

        });

and the following css for the tooltip

#myCustomTable {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 100%;
    border-collapse: collapse;
    position: relative;
    display: inline-block;
    z-index: 10050;
}

    #myCustomTable td, #myCustomTable th {
        font-size: 9px;
        border: 1px solid #4377e1;
        padding: 3px 7px 2px 7px;
    }

    #myCustomTable th {
        font-weight: bold;
        font-size: 11px;
        text-align: left;
        padding-top: 5px;
        padding-bottom: 4px;
        background-color: #4377e1;
        color: #ffffff;
    }

But what ever I tryed with z-Index etc. the tooltip is always behind the map.

Do you have any idea to solve this?

Regards Manfred

Parents
  • 898
    Offline posted

    fore some reasons the tooltip template was not copied very well. here is the korrekt one.

    tooltipTemplate: "<table id='myCustomTable'>" +
                     "<tr><th colspan='2'>${item.Office}, ${item.Country}</th></tr>" +
                     "<tr><td>Web:</td><td>${item.Web}</td></tr>" +
                     "<tr><td>Access:</td><td>${item.Access}</td></tr>" +
                     "</table>",

Reply Children
No Data