Hide block properties when block is collapsed

To be fair, if Blocks are collapsed, having the properties show up on hover is a nice way to get a glimpse of what’s inside, if the Title of the Block is not helpful enough. But I wish there was a way to add a timing to the hover so that just scrolling would not flash on screen all properties of the traversed collapsed blocks.

Is it maybe possible somehow to say: if I hover over a block title and the block is collapsed and if my mouse stays there for 2seconds then show the properties div?

1 Like

This is possible with css attribute transition and its delay value.

Can someone make the transition delay in a code snippet that i (a total rookie) can copy and paste?

I too want the delay to be a bit longer, cause i dislike the hover over linked sites to show up so soon.

I haven’t managed to make it work :frowning:

If we use e.g. @FlorianF’s code, we can do either:

  • a transition:
    • inside rule .block-content-inner:hover ~ .block-properties {
      • add these lines:
          transition: opacity 2s step-end;
          @starting-style {
            opacity: 0;
  • an animation:
    • define the following animation:
      @keyframes anim {
        0% {
          display: none;
        100% {
          display: block;
    • then inside rule .block-content-inner:hover ~ .block-properties {
      • add this line: animation: anim 2s step-end;

I don’t know why or if I have any conflicting CSS but I tried so many variations from web and your suggestion also and I don’t see any difference… :man_shrugging:

Most probably you have conflicting code. Try in an empty graph without customizations.

I have noticed that sometimes a custom css only workes if i put it in another place in my custom.css. Is there a specific order that one has to comply with?

For examples: I recently added some new custom.css and suddenly my hide-block-properties stopped working. If i put it back on the very top of my custom.css it starts working again…

  • The later/lower a css rule is placed in the file, the higher its priority (i.e. it trumps previous rules).
  • Ideally, should merge similar rules to a single desired one, so as to avoid such issues.

Thanks. It works for me. But it also hides page properties. Are there any configurations to show page properties while hide block properties?

UPDATE: I have solved this by adding :not(.page-properties)

my implementation: Collapse/Hide Properties Easily - #4 by hulalala

Have to correct my simple CSS from above again, since the behaviour in v0.10.9 has changed, e.g. the ‘collapsed’ - attribute now disppears when a block without children gets collapsed :

/* Hide block-properties of collapsed blocks */
.ls-block:not([data-collapsed="false"]) .block-properties:not(.page-properties) {
  display: none;