Skip to Content

Geo Map tooltip formatting with CSS

Hello,

I am trying to format the tool tip of geo map component with CSS. I am able to do that, but I just want to hide value on the tooltip.

I am using the following CSS tag for this:

.myMap .sapzengeomap-tooltip .sapzengeomap-value {
	color: indianred !important;
}

I am using Design Studio 1.6.

Thanks,

Zahid.

map-pic.png (306.3 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

5 Answers

  • Best Answer
    Feb 02 at 05:00 PM

    For Lumira 2.x Designer:

    To hide the value in tooltip:

    .myMap .v-tooltip-dimension-measure tr:nth-child(1){
        visibility : hidden;
    }

    To change the color of the value only:

    .myMap .v-tooltip-dimension-measure tr:nth-child(1)> td:nth-child(2){
        color : blue !important;
    }

    Add comment
    10|10000 characters needed characters exceeded

  • Feb 02 at 12:34 PM

    Hi @arijit.das

    That worked like a charm. I now have another question. I have the same dashboard on Lumira 2.1 Designer, but the map component is different and CSS tag for tooltips are not the same. I couldn't find css tags for Lumira Designer 2.1. Do you happened to know the tag for that?

    Thanks a lot.

    Add comment
    10|10000 characters needed characters exceeded

  • Feb 01 at 03:43 PM
    Hello Zahid - have you tried using the visibility: hidden; syntax with CSS? 
    Add comment
    10|10000 characters needed characters exceeded

  • Feb 01 at 04:40 PM

    To hide the value in tooltip:

    .myMap .sapzengeomap-tooltip-content tr:nth-child(2) {
        visibility:hidden;
    }

    To change the color of the value only:

    .myMap .sapzengeomap-tooltip-content tr:nth-child(2)>td:nth-child(2) {
        color: blue !important;
    }
    Add comment
    10|10000 characters needed characters exceeded

  • Feb 05 at 05:19 AM

    Thanks a lot @arijit.das

    Add comment
    10|10000 characters needed characters exceeded