我把笔记属性yaml改成了一个悬浮卡片

经验分享
1

笔记属性显示在第一行看起来很难受，我把它做成了一个悬浮卡片，把鼠标悬停在右上角的触发小球就可以优雅的展开内容卡片了。

屏幕截图 2025-07-31 125039
屏幕截图 2025-07-31 125039718×458 24.7 KB

3 个赞
2

把鼠标移开卡片区域就是这样
屏幕截图 2025-07-31 125206

3

好想法，我是放在右边栏方便随时查看

（ob的功能，设置-编辑器-属性隐藏，设置-核心插件-属性列表打开）

image
image904×727 56 KB

2 个赞
4

这个是怎么设置的 还是说用了什么插件呢

6

现在发现了一个问题，就是在选择列表的时候卡片会消失，正在修复中。。。

7

纯css代码。
【【obsidian笔记属性】把笔记属性换成右上角悬停小球，优雅】【obsidian笔记属性】把笔记属性换成右上角悬停小球，优雅_哔哩哔哩_bilibili

8

选择列表的时候卡片会消失

纯 CSS 咩。

这里有前例 悬浮Yaml区的CSS，使Front matter悬浮显示 看样子能解决你这个问题，你可以参考看看。

自己第一次用纯 CSS 设悬浮的，基本上都会遇到这个问题，也不是一回两回了。

9

这是怎么办到的？能分享一下吗?

10

（ob的功能，设置-编辑器-属性隐藏，设置-核心插件-属性列表打开）

11

obsidian有自带的设置可以放到侧边栏

image
image1815×605 149 KB

image
image930×362 53.3 KB

12 
/* 确保容器正确约束 */
.workspace-leaf-content {
  position: relative;
  overflow: visible; /* 允许卡片展开 */
}

.metadata-container {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  z-index: 100;
  overflow: hidden;
  background: linear-gradient(135deg, var(--interactive-accent), #6C5CE7);
  border-radius: 50%;
  box-shadow:
    0 3px 10px rgba(0,0,0,0.1),
    0 0 0 1px var(--background-modifier-border),
    inset 0 1px 0 rgba(255,255,255,0.2);
  cursor: pointer;
  transition:
    width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-radius 0.4s ease 0.1s;
}

.metadata-content {
  opacity: 0;
  padding: 0;
  width: 350px;
  height: 0;
  transition:
    opacity 0.3s ease 0.15s,
    padding 0.3s ease 0.15s,
    height 0.3s ease 0.15s;
  pointer-events: none;
  position: relative;
  background: var(--background-primary);
  border-radius: 12px;
}

/* 增强的悬停和焦点状态 */
.metadata-container:hover,
.metadata-container:focus-within,
.metadata-container.is-active {
  width: 350px;
  height: auto;
  min-height: 150px;
  border-radius: 12px;
  transition-delay: 0s;
}

.metadata-container:hover .metadata-content,
.metadata-container:focus-within .metadata-content,
.metadata-container.is-active .metadata-content {
  opacity: 1;
  padding: 16px;
  height: auto;
  pointer-events: auto;
}

/* 增加更大的hover保护区域 */
.metadata-container::before {
  content: "";
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  z-index: -1;
  pointer-events: auto;
}

/* 触发指示器 */
.metadata-trigger {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  z-index: 101;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &::before {
    content: "i";
    font-size: 16px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: white;
  }
}

.metadata-container:hover .metadata-trigger,
.metadata-container:focus-within .metadata-trigger,
.metadata-container.is-active .metadata-trigger {
  opacity: 0;
  transform: scale(1.5) rotate(90deg);
  transition:
    opacity 0.3s ease,
    transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* 确保子元素不会破坏hover状态 */
.metadata-content * {
  pointer-events: auto;
}

/* 添加延迟收缩 */
.metadata-container {
  transition-delay: 0s;
}

.metadata-container:not(:hover):not(:focus-within):not(.is-active) {
  transition-delay: 0.2s; /* 200ms延迟收缩 */
}
13

已经修复了动画不流畅和鬼畜卡顿的问题，应该是完整版了。

/* 确保容器正确约束 */
.workspace-leaf-content {
  position: relative;
  overflow: visible; /* 允许卡片展开 */
}

.metadata-container {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;/*小球的宽度*/
  height: 36px;/*小球的高度*/
  z-index: 100;
  overflow: hidden;
  background: linear-gradient(135deg, var(--interactive-accent), #6C5CE7);
  border-radius: 13%;/*悬浮触发器的圆角*/
  box-shadow:/*背景颜色*/
    0 3px 10px rgba(0,0,0,0.1),
    0 0 0 1px var(--background-modifier-border),
    inset 0 1px 0 rgba(255,255,255,0.2);
  cursor: pointer;
  transition:
    width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),/*卡片展开瞬间的宽度变化速度*/
    height 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),/*卡片展开瞬间的高度变化速度*/
    border-radius 0.4s ease 0.1s;/*卡片展开瞬间的圆角变化*/
}

.metadata-content {
  opacity: 0;
  padding: 0;
  width: 360px;/*卡片内容的宽度*/
  height: 0;
  transition:
    opacity 0.3s ease 0.15s,
    padding 0.3s ease 0.15s,
    height 0.3s ease 0.15s;
  pointer-events: none;
  position: relative;
  background: var(--background-primary);
  border-radius: 12px;/*卡片内容的圆角*/
}

/* 增强的悬停和焦点状态；卡片的尺寸，注意不是内容的尺寸 */
.metadata-container:hover,
.metadata-container:focus-within,
.metadata-container.is-active {
  width: 368px;/*卡片的宽度*/
  height: auto;/*卡片高度自动*/
  min-height: 150px;
  border-radius: 13px;/*卡片的圆角*/
  transition-delay: 0s;
}

.metadata-container:hover .metadata-content,
.metadata-container:focus-within .metadata-content,
.metadata-container.is-active .metadata-content {
  opacity: 1;
  padding: 16px;
  height: auto;
  pointer-events: auto;
}

/* 增加更大的hover保护区域 */
.metadata-container::before {
  content: "";
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  z-index: -1;
  pointer-events: auto;
}

/* 触发指示器 */
.metadata-trigger {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  z-index: 101;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &::before {
    content: "i";
    font-size: 16px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: white;
  }
}

.metadata-container:hover .metadata-trigger,
.metadata-container:focus-within .metadata-trigger,
.metadata-container.is-active .metadata-trigger {
  opacity: 0;
  transform: scale(1.5) rotate(90deg);
  transition:
    opacity 0.1s ease, 
    transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* 确保子元素不会破坏hover状态 */
.metadata-content * {
  pointer-events: auto;
}

/* 添加延迟收缩 */
.metadata-container {
  transition-delay: 0s;
}

.metadata-container:not(:hover):not(:focus-within):not(.is-active) {
  transition-delay: 0.005s; /* 极短的延迟收缩：这个值高了会让你的卡片收缩时慢半拍 */
}
1 个赞
14

可以问一下笔记属性中的英文字体是什么吗？

15

image
image968×267 36.3 KB

1 个赞
16

针对最新版反馈几个问题：

  1. 悬浮球上面的“笔”字能不能改成一个可自定义的图标？或者悬浮球本身就直接用一个图标
  2. 使用了这个CSS片段之后，侧边栏中的属性也会缩成悬浮球，能不能让侧边栏中的YAML属性正常显示？
  3. 如图，白色框左侧和下边的边距都是正常的，但右边却没有边距，甚至超出了外框
    2025-08-12 13-15-45
  4. 如图，建议把“笔记属性”的颜色改成白色，或者深褐色，黑色之类，否则看不清楚
    2025-08-12 13-16-40