gs-querycards

chimo

gs-querycards

Archived

You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.

Go to file

Chimo bfed35b8ca Fix links and screenshot		7 years ago
locale	Adding translations to Spanish and Esperanto	8 years ago
.jscsrc	Formatting	9 years ago
.jshintrc	Formatting	9 years ago
LICENSE	Add license info	11 years ago
README.md	Fix links and screenshot	7 years ago
hovercard.css	StatusNet -> GNU social	9 years ago
hovercard.js	group: Support example.org/group/$ID/id URLs	8 years ago

README.md

Intro

This tiny jQuery plugin scans your selectors for a link that contains an @-mention.
It adds a popup to those links that contains more information about this user.
The popup appears on when you hover over the @-mention.

Demo

Visit: https://chromic.org/gs-querycards/

Usage

Relevant snippet

<div class="hovercard">
  <a href="https://sn.chromic.org/chimo">@chimo</a>
</div>
<script>
  $('.hovercard').gsHovercard();
</script>

Complete example

<!DOCTYPE html>
<html>
  <head>
    <title>GNU social Querycards</title>
    <link rel="stylesheet" href="hovercard.css" />
  </head>
  <body>
    <div class="hovercard">
      <a href="https://sn.chromic.org/chimo">@chimo</a>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="hovercard.js"></script>
    <script>
      $('.hovercard').gsHovercard();
    </script>
  </body>
</html>

Translations

If the widget has been translated in your language, you use it on your page by adding the locale before hovercard.js

To use the French translation, for example:

    <script src="locale/fr.js"></script>
    <script src="hovercard.js"></script>

Screenshot

You can of course change the look by including your own CSS on your page.