6 Replies Latest reply on Nov 1, 2018 2:45 PM by jgoldhammer

    Short profile/business card on hover - How to?

    mattdickens

      I'm putting together a couple of tiles to allow the display of recent content in a specific group and to follow specific blogs etc.. but one of the features I'd like to include is the display of a user's business card or mini-profile when hovering over their name or avatar. Has anyone done this. I can't find any guidance on this and don't understand why such core functionality isn't made easier for developers to include in their apps and tiles to ensure consistency.

       

      I can see it's using tooltip and there's the /profile-short.jspa that you pass the userID of the user you want to display which returns the following but anyone help me out on how to call it and render it?

       

      <div id="jive-error-box" class="jive-error-box" style="display:none;" aria-live="polite" aria-atomic="true">

      </div>

       

       

      <section class="j-usercard-right clearfix js-usercard-profile-data">

          <h3>

                  <a href="/people/mdickens001" class="font-color-normal">Matthew Dickens</a>

          </h3>

          <dl>

              <dt class="font-color-meta">Role</dt>

              <dd>

                  <a href="/people?filterID=all%7Eprofile%5Btitle%5D%7Etitle%5BBusiness%20Solutions%20Lead%2C%20Global%20Knowledge%20Services%5D" class="url font-color-normal">Business Solutions Lead, Global Knowledge Services</a>

                  <a href="/people/mdickens001/people?filterID=orgchart" title="view in orgchart">

                      <span class="jive-icon-sml jive-glyph-orgchart"></span>

                  </a>

              </dd>

              <dt class="font-color-meta">Line of Service</dt>

              <dd>

                  <a href="/people?filterID=all%7Eprofile%5Bdepartment%5D%7Edepartment%5BIFS%5D" class="url font-color-normal">IFS</a> </dd>

              <dt class="font-color-meta">Email</dt>

              <dd>

                  <a href="xxxxxxxxxxxxxxxxxxxxxxxx" class="font-color-normal">xxxxxxxxxxxxxxxxxxxxxxxxxx</a> </dd>

              <dt class="font-color-meta">Office Phone</dt>

              <dd>

                  +44(0)12 345 6789 </dd>

          </dl>

      </section>

       

       

      <section class="j-usercard-left">

          <img src="/profile-image-display.jspa?imageID=60388&amp;size=200" class="j-profile-photo" alt="" />

          <span class="js-statuslevel">

      <span class="j-status-levels"><img src="/8.0.2.e63f85c/resources/images/status/statusicon-205.png"

                 alt="Mega Spark" title="Mega Spark"/> Mega Spark <span>(3,074 points)</span></span>

          </span>

      </section>

       

       

      <section class="j-usercard-actions clearfix">

          <form class="j-form">

              <div class="j-modal-buttons clearfix">

                  <div class='j-card-button'>

                      <div class="js-follow-user-link j-follow-user-link clearfix" data-userid="0001" data-streamsassoc="1" data-location="tool-tip" data-bidirectional="false" data-follower-count="177" data-displayname="Matthew Dickens" data-approvals-enabled="false" aria-live="polite" aria-atomic="true" aria-label="Follow"><a href="#" class="js-follow j-btn-global j-btn-small" style="display:none">Follow <span class="jive-icon-glyph icon-pulse j-instreamicon"></span></a><a href="#" class="j-following js-following  j-btn-global j-btn-small"><span class="j-js-streams-assoc-count j-instream-count">Following in <span class="jive-icon-glyph icon-pulse j-instreamicon"></span> 1</span></a><span class="js-pending j-disabled j-btn-global j-btn-small" style="display:none">Awaiting approval</span><span class="j-friend-list-chooser-container j-js-friend-list-chooser-container" style="display: none;"><a href="#" title="Apply labels" class="js-connection-label-btn j-connection-label-btn j-social-action j-split-button j-btn-global j-btn-small"  title="Apply labels"><span class="jive-icon-glyph icon-user-plus"></span><span class="j-508-label">Apply labels</span></a>

                          <div class="j-connection-labels-menu js-connection-labels-menu j-menu j-quick-menu j-pop-main" style="display: none;" data-userid="0001">

                              <h4 class="font-color-meta-light">Apply labels</h4>

                              <form class="j-js-friend-list-chooser">

                                  <ul class="j-icon-list"></ul>

                              </form>

                          </div>

                          </span>

                      </div>

                  </div>

              </div>

          </form>

      </section>