This page demonstrates the various display modes for xbRef shortcodes. NB do not try to copy and paste the sample code on this page - there is an invisible character between the opening { and the xbref that prevents the content plugin triggering. All of these examples are styled using the default built-in css file

A simple reference shortcode using a tag for the reference and the default options^[200] showing both a popover and footnote.

  {​xbref tag="19" }default options{​/xbref} 

Using a tag again with the disp= element to show a footnote only^[201]. There is no popover action associated with the text.enclosed in the shortcode.

  {​xbref tag="18" disp="foot" }footnote only{​/xbref} 

If you insert a shortcode with no text selected then it will only display as a footnote. 

Both popover and footnote using a tag^[202] with some additional text appended to the tag description.

  {​xbref tag="18" addtext="with some <i>additional</i> text appended" disp="both" trig="hover" }using a tag{​/xbref} 

 A WebLink component item used as a reference click^[203] for the trigger - ie you have to click on the link to bring the popover up, and then click the link again to clear it.

  {​xbref tag="0" link="1" disp="both" trig="click" }click{​/xbref} 

The first batch of footnotes can be inserted here in the article with the  {​xbref-here head="Header Text" num="200" }  shortcode. There are options to set the heading for this footnote area and also the numbering start for the next footnote area inserted. One use for this is if you are using page breaks in a long article and wish to insert the footnotes for each page separately at the bottom of the pages - simply place an  {​xbref-here} shortcode immediately before the page break.

To change the numbering start for a whole article simply insert a  {​xbref-here num="X" }  shortcode at the top of the article before any references.

Use of PopOvers

These examples demonstrate the three types of trigger available for a popover and also some of the styling that can be used to provide cues to the user. The active text can be coloured and underlined differently for each type of popover.

This is a hover popover   {​xbref tag="18" disp="pop" trig="hover" }hover{​/xbref} The popover appears on mouse pointer-over the text and disappears when the pointer moves away.

This is a focus  popover   {​xbref tag="18" disp="pop" trig="focus" }focus{​/xbref} The popover appears on clicking the text and disappears when clicking anywhere else.

This is a click  popover   {​xbref tag="18" disp="pop" trig="click" }click{​/xbref} The popover appears on clicking the text and only disappears when the text is clicked again. The prompt to click again in the popover is optionally added automatically.

There is also an additional element poppos= to position the popover. Values can be [top | right | bottom | left]. It isn't available via the xbRefs-Button, but which you can enter it manually by editing the shortcode. This is useful if the trigger link is at the
  edge of the screen. This maybe preferable to relying on Bootstrap's auto positioning as above. 

{​xbref tag="19" disp="pop" trig="hover" poppos="right" }edge{​/xbref} 

Styling of Popovers Footnotes 

The colours, borders and font-sizes for the popovers and footnote area can be set in the xbRefs-Content plugin options - they will apply to the whole site. The same colours are used for both footnotes and popovers for consistency.  A style sheet is included defining class names and some other attributes for the various parts - obviously you can override or extend these elements with your own styles as you require. 

Here is an example using manually entered^[300] text for the citation title and description rather than a tag or link. 

  {​xbref tag="0" disp="both" title="Citation Title" desctext="A description with <i>simple</i> <b>html</b> code included inline" disp="both" trig="hover" }manually entered{​/xbref} 

This is ok for one-off footnotes, but if you are likely to need the same reference elsewhere, or if you which to create an index of footnotes on a separate page then you are better off using tags and links.

The forthcoming xbRefMan component will include site views to display lists of footnotes, or you can use the builtin tags component, although its views are somewhat limited.

Finally the tags and weblinks can include rich  text^[301] in their description. Complex html is likely to break a popover and may look odd in the footnote area.

  {​xbref tag="35" disp="both" trig="focus" }rich text{​/xbref} 

 If there are any footnotes that have not already been displayed by use of a   {​xbref-here }  shortcode they will automatically display at the end of the article. In this case the footnote numbering was reset above to start from 200, otherwise the numbering for each footnote area would simply continue in sequence. The final area will use the default heading text set in the  plugin options.