如何在Rails的render中添加Tooltip的CSS样式？

核心结论 #

可以在render调用中传递额外参数（包括CSS类、tooltip文本等），在局部模板中接收并使用，同时通过CSS确保图标与标题同行显示。

具体步骤 #

1. 修改render调用，传递所需参数
   调用render时，将tooltip文本、标题容器类等参数传入：

   <%= render 'chat', { 
     chat_title: '**title**', 
     allow_comment: true,
     tooltip_text: I18n.t('foo.bar'),
     title_wrapper_class: 'quest-subtitle'
   } %>
   

2. 更新局部模板_chat.html.erb
   在局部模板里，将标题和tooltip图标放在同一行内容器中，正确使用传入的参数，同时修正之前的语法错误（不要把Ruby参数写在HTML标签属性里）：

   <span class="<%= title_wrapper_class %>">
     <%= chat_title %>
     <a class="tooltipped quest-hover" 
        data-position="top" 
        data-tooltip="<%= tooltip_text %>">
       ℹ️
     </a>
   </span>
   
   <!-- 原有chat模板的其他内容 -->
   

3. 添加CSS确保图标和标题同行
   图标跑到标题下方通常是元素默认块级布局导致，添加以下CSS让图标保持行内对齐：

   .quest-hover {
     display: inline-block;
     vertical-align: middle; /* 和标题文字垂直对齐 */
     margin-left: 6px; /* 可选，和标题拉开间距 */
   }
   

错误原因说明 #

你之前的写法存在两个问题：

• 错误地将Ruby参数allow_comment: true写在了<a>标签的属性中，属于语法错误，会导致渲染异常；
• 未给图标设置合适的行内布局样式，导致元素换行显示。

内容的提问来源于stack exchange，提问作者Railsnotonrail