How can i get the hover profiles to appear in my user search plugin?

[Matt Albone]

Hello

I have a people searhc plugin that's nearly finished, I just cant figure out how to get the hover profiles working as can be seen in the default confluence people directory.

I pass through the following HTML, which as far as i can tell mimics the HTML used by the people directory:

"<a class=\"userLogoLink userlink-"+ii+"\" href=\"/display/~"+login+"\" data-username=\""+ login+ "\" title=\"\" data-user-hover-bound=\"true\">" +
	"<img class=\"userLogo logo\" height=\"40\" onerror=\"this.onerror=null;this.src='../../images/icons/dnprofilepics/thumbnails/paul_whos_who.jpg';\" src=\"http://dnet/images/icons/dnprofilepics/thumbnails/"+pname+".jpg \" title=\"\">"+
"</a>"

Is there perhaps something in the atlassian-plugin.xml file that i need to activate for these to work? Any help is appreciated.

Cheers, Matt

[David at David Simpson Apps · Accepted solution]

Add some more classes e.g. this works:

<a href="some.action" 
   class="url fn confluence-userlink userlink-24"  
   data-username="david" 
   title="" 
   data-user-hover-bound="true"
   >David Simpson</a>

[Andrei Cocari]

I've ran into a similar situation. In my case, I'm using AJAX to generate content.
Unfortunately there doesn't seem to be a lot of information on the topic and I've had to use trial and error to resolve my issue.

The generated link we want to associate with the hovering effect has to have the following attributes:

• class="url fn confluence-userlink"
• data-username="<username>"
• data-user-hover-bound="false"

Please note that data-user-hover-bound HAS to be set to false else the JavaScript won't parse it.

Furthermore, the following JS function must be called in order to bind it to the link:

AJS.toInit(function($) {
// Bind the users hover to its profile picture and to its <a> username
      Confluence.Binder.userHover();
});

[Helen Setchell]

thank you for this - was just what I was looking for

[Andrei]

Thanks Andrei. Some extra info:

`Confluence.Binder.userHover` searches for `span.user-hover-trigger, a.confluence-userlink, img.confluence-userlink, a.userLogoLink` and filters out `[data-user-hover-bound!='true']`.

This means:

• you need to call the function after you've added content dynamically
• data-user-hover-bound must not be true (you can also leave it out)
• the CSS class depends on the element type (e.g. span or a)

Check out the template `user` in atlassian-confluence-XYZ\confluence\includes\soy\user.soy  (or the velocity macro #userLogoBlock in macros.vm) to see the standard generated HTML structure)