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?

8

Never looked but you can start looking thorugh the repo:

9

Any solution here?

10

I found a solution without changing the stylesheet.

component: oh-plan-marker
    config:
      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
    slots:
      default: []

grafik

1 Like
11

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:

markers:
  - component: oh-plan-marker
    config:
      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
    slots:
      default: []

tooltipDirection: left and tooltipOffsetX: 20 have no effect:

oh-plan-marker

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é

12

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]"
13

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 “”

14

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

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