CODEWITHSUNDEEP
jquerycssruby-on-railstooltipzurb-foundation
Damir Nurgaliev
Damir Nurgaliev

Reputation: 351

How to correctly move elements in tooltip

i'm creating a like model in rails application. To show which user liked the bonus, i'm using foundation tooltip.

Here is a code:

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

The output html looks like:

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

I want to move each users full name under their avatar on tooltip. How can I do it?

Upvotes: 0

Views: 75

Answers (1)

sol
sol

Reputation: 22949

You could try moving the <p> with the username under the <img> tags in the html. Like this...

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

Upvotes: 1

Related Questions