Profile avatar on Hover

Hello guys   

I have seen two similar topics about this. (see link below) However, what I want here is a little different. I hope to display only one specific profile field called 'RPG Stat' whenever someone rollover the profile avatar. So it would show somethink like the image I attached below. Thank you very much in advance, very much appreciated!

,Yaya

The two topic:
https://help.forumotion.com/t143444-profile-field-on-hover
https://help.forumotion.com/t143627-hover-over-avatar
My Forum: thelosteden.com
Forum Version: Invision

Hi @yayayes,

It should be possible as long as the profile field as a unique id or class to make modifications. However, do you have a test account that I can use to see the forum ? Having one should make it easier to figure out what I need to do.

Thank you Ange Tuteur. Here is the ID   

ID: TestNPC
PASSWORD: 

Thanks.

Could you display the content you want to show over the avatar in the messages ? I notice I can only see it on the profile page. ^^

Oh sorry >< I changed it just now

Try adding this script :
Modules > JS codes management > New

Placement : In the topics

Code:

$(function() {
  $('.postprofile td[background] > div > .codebox').each(function() {
    $(this).closest('.postprofile').find('.postdetails > center > a').append(this);
  });
});

Then add this to your CSS :
Display > Colors > CSS stylesheet

Code:

.postprofile center > a {
  display:inline-block;
  position:relative;
}

.postprofile center > a > .codebox dd {
  background:rgba(0, 0, 0, 0.8);
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0;
  visibility:hidden;
  transition:300ms;
}

.postprofile center > a:hover > .codebox dd {
  opacity:1;
  visibility:visible;
}

I'm not sure if all the fields are using the hide codebox as the container, but if they're not, try adding it around them. This :

Code:

[hide][/hide]

Doing so should give this result :


You might need to add some line breaks though.

It's working! You are amazing as ever   Though I notice a little gap under profile picture that wasn't there before.. could you please help me get rid of it? Also.. how can I move the text down a tiny bit more so it can be in the center and add a round corner to it?

You'll have to update the CSS a bit. Try replacing it with this :

Code:

.postprofile center > a {
  display:inline-block;
  position:relative;
}
 
.postprofile center > a > .codebox dd {
  background:rgba(0, 0, 0, 0.8);
  border-radius:10px;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:10px;
  opacity:0;
  visibility:hidden;
  transition:300ms;
  padding-top:10px;
}
 
.postprofile center > a:hover > .codebox dd {
  opacity:1;
  visibility:visible;
}

For the vertical alignment, try adjusting it with

Code: padding-top

, at the moment I have it with 10px. As for the gap on the bottom, try adjusting that with

Code: bottom:10px;

; I already added a small offset for this. Just so you know, the size of the container depends on the size of the user avatar, so it may appear differently on different users.

It looks very nice. Thank you again Ange Tuteur!  

You're welcome ^^

Topic archived

Have a nice day.