Editing ORCID (section)

= Rendering with Bootstrap =

[[File:orcid_bootstrap.png|thumb|left|alt=ORCIDs displaying in the Bootstrap theme|ORCID and Bootstrap]]

In a recent redesign of [http://eprints.whiterose.ac.uk White Rose Research Online] the [https://github.com/eprintsug/bootstrap Bootstrap theme] was used.
The ORCID links are now enhanced with a tooltip and the green icon. There may be examples on the [http://eprints.whiterose.ac.uk/cgi/latest_tool latest 20 additions] page.

== Bootstrap tooltop ==
This block of code finds anything with a class of 'orcid', and adds the green logo to it, and a tooltip that reads 'ORCID: ''orcid-value''', as shown in the image.

The example code below is based on the following rendering of a person who may have an ORCID:
<source lang="html4strict">
<!-- NB line-breaks added here for readability are not normally output by EPrints! -->
<span class="person">
  <span class="person_name">Castillo Ortiz, P.J.</span>
  <a href="http://orcid.org/0000-0003-4540-1855" target="_blank" class="orcid">
    <span>orcid.org/0000-0003-4540-1855</span>
  </a>
</span>
</source>

== jQuery ==
<source lang="javascript">
// selector used here depends on your rendering. You may want to use something like a[href*='orcid.org/0000-']
jQuery('.orcid').tooltip({
	'placement': 'auto',
	'title': function(){ return "ORCID: "+ jQuery(this).text()},
}).append('<img src="/images/orcid_16x16.png" alt="" />').find('span').hide();
</source>

== CSS ==
The green colouring is added using the following css, which also makes the background of the tooltip opaque, not semi-transparent as it is by default.
<source lang="css">
.person + .tooltip > .tooltip-inner,
.orcid + .tooltip > .tooltip-inner {
  background-color: #A6CE39;
  border: 1px solid #000000;
  white-space: pre;
  max-width: none;
}
.person + .tooltip.in,
.orcid + .tooltip.in {
  opacity: 1;
  filter: alpha(opacity=100);
}
/* This adds a green dashed line under an author's name when hovered. This helps in big author lists to tie initials and surname together */
.person:hover {border-bottom: 1px dashed #a6ce39;}
.orcid a:hover {
        color: #a6ce39;
}
</source>