jquery - 如何正确移动工具提示中的元素

标签 jquery css ruby-on-rails tooltip zurb-foundation

我正在 Rails 应用程序中创建一个类似的模型。 为了显示哪个用户喜欢奖金,我使用了基础工具提示。

代码如下:

- avatars = bonus.like_user_avatars.map { |avatar| image_tag(avatar) }
span.has-tip.top data-tooltip="" data-template="<div class='tooltip'>
<p>#{bonus.like_user_fullname.join(", ")}</p>#{avatars.join}</div>"Likes #{bonus.likes_count}

输出的 html 如下所示:

    <span class="has-tip top" data-template="<div class='tooltip'>
    <p>Damir Nurgaliev, Damirikzrtyu Damirik</p><img src=&quot;https://lh4.googleusercontent.com/-mosfIn_6OMU/AAAAAAAAAAI/AAAAAAAAAEE/kR28SfgytTc/s64/photo.jpg&quot; alt=&quot;Photo&quot; />
    <img src=&quot;https://lh6.googleusercontent.com/-rOyKmYUWNfs/AAAAAAAAAAI/AAAAAAAAABY/Nj3lXpqII9A/s64/photo.jpg&quot; alt=&quot;Photo&quot; /></div>" 
    data-tooltip="r90rx1-tooltip" title="" aria-describedby="l150xr-tooltip" data-yeti-box="l150xr-tooltip" data-toggle="l150xr-tooltip" data-resize="l150xr-tooltip">Likes 2</span>

我想在工具提示的头像下移动每个用户的全名。我该怎么做?

最佳答案

您可以尝试移动 <p>使用 <img> 下的用户名html中的标签。像这样...

     ...
   <img src=&quot;https://lh4.googleusercontent.com/-mosfIn_6OMU/AAAAAAAAAAI/AAAAAAAAAEE/kR28SfgytTc/s64/photo.jpg&quot; alt=&quot;Photo&quot; />
   <img src=&quot;https://lh6.googleusercontent.com/-rOyKmYUWNfs/AAAAAAAAAAI/AAAAAAAAABY/Nj3lXpqII9A/s64/photo.jpg&quot; alt=&quot;Photo&quot; />
   <p>Damir Nurgaliev, Damirikzrtyu Damirik</p></div>
     ...

关于jquery - 如何正确移动工具提示中的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40947147/

相关文章:

jquery - Rails 中的服务器端数据表

javascript - 响应式 jQuery 数据表无法获取一行的详细信息

jquery - 保持表格 thead 第 1 行和 tbody 第 1 列修复了 IE 中滚动水平滚动条闪烁的问题

javascript - 使用 Javascript 触发基本的 CSS 动画

html - 垂直滚动条在 html 表格中无法正常工作

ruby-on-rails - 模块作用域不对

javascript - JQuery 窗口滚动

javascript - onClick 在 C# 中的按钮单击上不触发

css - 在不进行变换的情况下重置 RotateY 度数

ruby-on-rails - 使用 Rails 的 Twitter 机器人