Floorplan tooltip styling

Add-ons UIs
,
#1

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.
image
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
image

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

  tooltipStyles:
    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
http://my_ip_address:8080/css/3.app.css

TIA
Maciej

#2

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
#3

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

runtimeInfo:
  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:

config:
  label: Archives Floorplan
  sidebar: true
  imageUrl: http://192.168.67.52:8080/static/archiva_floorplan.png
  backgroundColor: white
  noZoomAnimation: false
  noMarkerZoomAnimation: true
  stylesheet: |
    .leaflet-tooltip-right {
      margin-left: 100px;
      }
    .leaflet-tooltip-left {
      margin-left: -100px;
      } 
markers:

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

#4

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.

#5

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.

image
image2105×769 111 KB

#6

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.

#7

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

How about just hard hacking the whole leaflet CSS. with larger tooltip margin?
http://my_ip_address:8080/css/3.app.css
Where is this CSS located on the server so I can modify once for all the tooltips?

A simple example of an Overview Page
#8

Never looked but you can start looking thorugh the repo:

#9

Any solution here?