如何正确移动工具提示中的元素答案

【问题标题】：How to correctly move elements in tooltip如何正确移动工具提示中的元素
【发布时间】：2016-12-03 11:17:45
【问题描述】：

我正在 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>

我想在工具提示上将每个用户的全名移动到他们的头像下。我该怎么做？

【问题讨论】：

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

【解决方案1】：

您可以尝试将<p> 与用户名移动到html 中<img> 标记下。像这样……

     ...
   <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>
     ...

【讨论】：

我不需要与头像和全名进行交换，我需要将每个全名与每个头像连接起来。
我不确定你的意思。你说你想把全名移到头像下面。连接是什么意思？
我的头像。在它下面我的全名，其他头像-其他全名。我的全名就这么一笔