How Do I.. Tooltips

In order to make adding content as easy as possible we have added tooltips for each field. In the first instance theit is a singe sentence that may prove enough, at the end of which is a link to a paragraph going int more details [and maybe a video link?]

 <span id="help00" class="helptip"> </span> Top tip - ALWAYS add a short description AND photo credit <a class="" href="/how-do-i-admin/how-do-i-add-story" target="_blank"><strong><em> more help...</strong></em></a> 

but first we wanted to make it stand out from the rest of the form. We did this with an svg format image of a question mark in a green bubble and added the code to the css file (/core/themes/claro/css/base/elements.css)

.helptip::before {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='green' d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e");
  position: relative;
  display: inline;
  background-repeat: no-repeat;
  content: "tip ";
  color: transparent;
}