Page Floorplan change label tooltip backgound?

Setup, Configuration and Use Beginners
1

Hello,

may I ask if Is there a way to use a custom css on markers on the Floorplan pages?

i.e. I’d like to add a simple background rectangle that would solve the readability issues (not the tooltip one I’d like to change form and colors ).

Platform information:

    • Hardware: raspberry pi 5
    • OS: RaspberrypiOS latest
    • openHAB version: 5.1
  • Issue of the topic: Got a photo as background that has color contrast ugly, cannot read marker labels.
  • Please post configurations (if applicable):
  • component: oh-plan-marker
    config:
    name: STATIC LABEL
    coords: 217.6047966717148,65.55266745747198
    useTooltipAsLabel: true
    tooltipPermanent: true
    tooltipColor: black
    tooltip: TEXTTHATCANTBEREAD
    tooltipFontWeight: bold
    slots:
    default:

Thanks, BR

2

Plan markers have a tooltipStyle object which can be used to add basic CSS styles to the tooltip just like the style object for other widgets:

  - component: oh-plan-marker
    config:
      ...other config
      tooltipStyle:
        background: rgba(0,128,0,.5)
        width: 150px

I don’t think this property is available in the design wizard, you have to add it via the code page. Also, it only impacts the text space inside the tooltip, not the whole tooltip itself, so it may not be sufficient for your needs.

There’s no way, that I’m aware of that you can add a stylesheet property that would be able to impact the tooltips because of the way the leaflet library renders them, so that tooltip style might be the best you can do.

3

You should have been able to apply a stylesheet to a map/plan page, however this is not possible in the current UI code. I have submitted a PR to enable this (#3815). Once this is merged, you will be able to add a stylesheet to format the tooltip for a leaflet page:

  stylesheet: |
    .leaflet-tooltip {
      color: red;
      background-color: black;
    }
2 Likes
4

Awesome! stylesheet in page config’s has always been spotty. The more consistent that gets the better.