Floorplan tooltip styling

Dear All. I have a simple floorplan with temp and humidity for many rooms.
With tooltips set to tooltipPermanent: true so they are visible all the time
I notice that the tooltip is actually half obscuring the icon.
If I inspect the page CSS this can be fixed by modyfing

.leaflet-tooltip-right {
   margin-left: 6px;

to like 20px and that would do the job for me

Now the question would be how do I pass this styling in YAML to fix that?
Some parameters can be passed in the , but those are related to text itself

    margin-left: 100px

But I somehown can’t modify that one related to leaflet-tooltip-right
Is that possible in YAML?

If not maybe I can hard hack the CSS for all the floorplans but here I have a problem finding the CSS on the OH3 server that is serving it


You can try searching the forums for the stylesheet property (which was added back in march or april if I recall). That allows page level css styling for widgets and other UI pages, I don’t know if it applies to the floorplans or not.

1 Like

Thanks, read throu the related posts and it looks that that feature was added in 3.1M3 so if my release is stable branch:

  version: 3.1.0
  buildString: Release Build

Is it already there? or should I switch to the milestone branch ?

I tried the following syntax on the main page:

  label: Archives Floorplan
  sidebar: true
  backgroundColor: white
  noZoomAnimation: false
  noMarkerZoomAnimation: true
  stylesheet: |
    .leaflet-tooltip-right {
      margin-left: 100px;
    .leaflet-tooltip-left {
      margin-left: -100px;

should that overwrite the .leaflet-tooltip-xxx css margin setting?

Milestones are the lead up to stable releases so your 3.1.0 is more recent than 3.1M3 and you should have the stylesheet functionality.

As far as I understand it, it should.

unfortunately in the syntax I providede one post up it does not. My coprehention of the CSS is very basic. I might have messed up something. This is the exact inspect

That I need to fix the margin for.

Hmm…as I said, I don’t know if the stylesheets are supposed to work with the floorplan pages. It looks like leaflet-tooltip-xxxx should be appropriately downstream so I’m not sure what’s going on.

You could also look into using the tooltipstyle parameter. The downside here is you’ll have to define it for every mark you place.

tooltipstyle works nice but it does the styling within the leaflet-tooltip, so margin-left: 100px does move text within the tooltip.

How about just hard hacking the whole leaflet CSS. with larger tooltip margin?
Where is this CSS located on the server so I can modify once for all the tooltips?

Never looked but you can start looking thorugh the repo:

Any solution here?

I found a solution without changing the stylesheet.

component: oh-plan-marker
      coords: 337.7173163691283,459.479341998814
      icon: f7:thermometer
      iconColor: gray
      item: TemperaturWohnen
      name: Temperatur Wohnen
      tooltipBackground: gray
      tooltipColor: gray
      tooltipPermanent: true
      useTooltipAsLabel: false
      tooltipOpacity: 50%
      tooltipOffsetX: 10
      default: []


1 Like

Hi Andreas,
is there still a check mark somewhere that needs to be activated? I have tried the same thing. However, it does not work.
I also tried it with a f7-icon and also cleared my browser cache. without success.
Helpful is also this docu about the floor plan markers. If it would work then?

Here is my code:

  - component: oh-plan-marker
      name: Temperatur Schlafzimmer
      item: TemperaturSchlafzimmer
      icon: oh:temperature
      tooltipFontSize: "10"
      coords: 449.2040906608001,433.53418052146986
      tooltipPermanent: true
      useTooltipAsLabel: false
      iconUseState: true
      tooltipDirection: left
      tooltipOffsetX: 20
      default: []

tooltipDirection: left and tooltipOffsetX: 20 have no effect:


By the way, how can I format the number? Round to one decimal place and write °C behind it? My system is currently set up so that the temperature is processed as a number in this format.

EDIT: I tried what works for a custom widget, but not here. It always tells me Not a Number (NaN°C).

tooltip: '=(Number.parseFloat(items[props.TemperaturSchlafzimmer].state.split(" ")[0]) * 100 / 100).toFixed(1) + "°C"'

Regards René

Hi René

In my installation ‘tooltipDirection’ and ‘tooltipOffsetX’ works without any other modification.

The number format is taken from the item definition:

Number TemperaturAussen 			"Aussentemperatur [%.1f °C]"

hey guys, can we make tooltip text larger? no matter what tooltip font size i configure its always the same (very small like in your picture).
I tried to define tooltip size to any number, and then in the code I tried to remove " " because this was the case with some other parameter which was not working because " " needed to be removed.
In any case, it doesn’t change the font size for mi, with or without “”

You can add most css to the tooltip with the tooltipStyle property:

  - component: oh-plan-marker
         font-size: 48px