DIV-1242: Update tooltip and link styling

edivorce/apps/core/static/css/main.scss

@@ -111,7 +111,7 @@ h4 {
 
 a {
 	color: $brand-links;
-	text-decoration: none;
+	text-decoration: underline;
 	-webkit-transition: all 0.1s ease-in-out;
 	transition: all 0.1s ease-in-out;
 
@@ -528,10 +528,12 @@ div.percent-suffix {
 
 .tooltip-link {
 	color: $brand-links;
-	border-bottom: dotted 1px $brand-links;
 	cursor: pointer;
 
 	&:hover {
+        .content {
+	        border-bottom: dotted 1px $brand-links;
+        }
 		color: $brand-blue;
 		border-bottom-color: $brand-links;
 	}
@@ -692,10 +694,6 @@ i.fa {
 	}
 }
 
-i.fa.fa-question-circle {
-	margin-left: 5px;
-}
-
 .form-buttons {
 	margin: 30px 0;
 

edivorce/apps/core/templates/partials/tooltips/affidavit.html

@@ -1,8 +1,14 @@
-<span class="tooltip-link" data-toggle="tooltip" data-placement="right"
-      data-html="true"
-      title="
-                <b>Affidavit</b>
-                <br /><br />
-                An affidavit is a written document that contains facts that you must swear under oath (usually on a Bible or other religious book)
-                or affirm (non-religious promise) to be true.">
-          {% if text %}{{ text }}{% else %}affidavit(s){% endif %}<i class="fa fa-question-circle" aria-hidden="true"></i></span>
+{% extends "partials/tooltips/base.html" %}
+
+{% block title %}
+    Affidavit
+{% endblock %}
+
+{% block inner %}
+    An affidavit is a written document that contains facts that you must swear under oath (usually on a Bible or other religious book)
+    or affirm (non-religious promise) to be true.
+{% endblock %}
+
+{% block label %}
+    affidavit(s)
+{% endblock %}

edivorce/apps/core/templates/partials/tooltips/affidavit_of_translation.html

@@ -1,10 +1,16 @@
-<span class="tooltip-link" data-toggle="{% if hover %}tooltip-hover{% else %}tooltip{% endif %}" data-placement="right"
-      data-html="true"
-      title="
-                <b>Affidavit of Translation</b>
-                <br /><br />
-                The Affidavit of Translation is an affidavit which is sworn by a translator before a notary,
-                lawyer or commissioner for taking Affidavits.
-                The original certificate of marriage should be exhibited to the Affidavit of Translation together
-                with the translation of the translator.">
-          Affidavit of Translation (F30)<i class="fa fa-question-circle" aria-hidden="true"></i></span>
+{% extends "partials/tooltips/base.html" %}
+
+{% block title %}
+    Affidavit of Translation
+{% endblock %}
+
+{% block inner %}
+    The Affidavit of Translation is an affidavit which is sworn by a translator before a notary,
+    lawyer or commissioner for taking Affidavits.
+    The original certificate of marriage should be exhibited to the Affidavit of Translation together
+    with the translation of the translator.
+{% endblock %}
+
+{% block label %}
+    Affidavit of Translation (F30)
+{% endblock %}

edivorce/apps/core/templates/partials/tooltips/agreement_to_annual_income_9.html

@@ -1,10 +1,16 @@
-<span class="tooltip-link" data-toggle="{% if hover %}tooltip-hover{% else %}tooltip{% endif %}" data-placement="right"
-      data-html="true"
-      title="
-                <b>Agreement as to Annual Income (F9)</b>
-                <br /><br />
-                This form is completed by registry staff after your application has been reviewed by them.
-                It shows the judge that your application has been checked and is complete.
-                <br /><br />
-                - Does not require signatures when filed online.">
-          Agreement as to Annual Income (F9)<i class="fa fa-question-circle" aria-hidden="true"></i></span>
+{% extends "partials/tooltips/base.html" %}
+
+{% block title %}
+    Agreement as to Annual Income (F9)
+{% endblock %}
+
+{% block inner %}
+    This form is completed by registry staff after your application has been reviewed by them.
+    It shows the judge that your application has been checked and is complete.
+    <br/><br/>
+    - Does not require signatures when filed online.
+{% endblock %}
+
+{% block label %}
+    Agreement as to Annual Income (F9)
+{% endblock %}

edivorce/apps/core/templates/partials/tooltips/base.html

@@ -0,0 +1,8 @@
+<span class="tooltip-link" data-toggle="{% if hover %}tooltip-hover{% else %}tooltip{% endif %}" data-placement="right" data-html="true" title="
+    <b>{% block title %}{% endblock %}</b>
+    <br /><br />
+    {% block inner %}{% endblock %}">
+<span class=" content">
+    {% if text %}{{ text }}{% else %}{% block label %}{% endblock %}{% endif %}
+</span><i class="fa fa-question-circle" aria-hidden="true"></i>
+</span>

edivorce/apps/core/templates/partials/tooltips/certificate_of_pleading_36.html

@@ -1,10 +1,16 @@
-<span class="tooltip-link" data-toggle="{% if hover %}tooltip-hover{% else %}tooltip{% endif %}" data-placement="right"
-      data-html="true"
-      title="
-                <b>Certificate of Pleadings Form (F36)</b>
-                <br /><br />
-                This form is completed by registry staff after your application has been reviewed by them.
-                It shows the judge that your application has been checked and is complete.
-                <br /><br />
-                - Does not require signatures when filed online.">
-          Certificate of Pleadings Form (F36)<i class="fa fa-question-circle" aria-hidden="true"></i></span>
+{% extends "partials/tooltips/base.html" %}
+
+{% block title %}
+    Certificate of Pleadings Form (F36)
+{% endblock %}
+
+{% block inner %}
+    This form is completed by registry staff after your application has been reviewed by them.
+    It shows the judge that your application has been checked and is complete.
+    <br/><br/>
+    - Does not require signatures when filed online.
+{% endblock %}
+
+{% block label %}
+    Certificate of Pleadings Form (F36)
+{% endblock %}

edivorce/apps/core/templates/partials/tooltips/commissioner.html

@@ -1,12 +1,18 @@
-<span class="tooltip-link" data-toggle="{% if hover %}tooltip-hover{% else %}tooltip{% endif %}" data-placement="right"
-      data-html="true"
-      title="
-                <b>Commissioner</b>
-                <br /><br />
-                A Commissioner for Taking Affidavits is a person appointed or designated under the Evidence Act to administer oaths and affirmations
-                and to take affidavits and declarations. A person may be eligible for appointment as a Commissioner for Taking Affidavits if their
-                employment, or work with a volunteer organization, involves administering oaths or affirmations, or taking affidavits or statutory
-                declarations, as permitted, authorized or required by law. Lawyers and notaries public are always commissioners for taking affidavits,
-                as are family justice counsellors and many court registry staff. There is also usually a commissioner for taking affidavits at each
-                Service BC office throughout the province.">
-          commissioner<i class="fa fa-question-circle" aria-hidden="true"></i></span>
+{% extends "partials/tooltips/base.html" %}
+
+{% block title %}
+    Commissioner
+{% endblock %}
+
+{% block inner %}
+    A Commissioner for Taking Affidavits is a person appointed or designated under the Evidence Act to administer oaths and affirmations
+    and to take affidavits and declarations. A person may be eligible for appointment as a Commissioner for Taking Affidavits if their
+    employment, or work with a volunteer organization, involves administering oaths or affirmations, or taking affidavits or statutory
+    declarations, as permitted, authorized or required by law. Lawyers and notaries public are always commissioners for taking affidavits,
+    as are family justice counsellors and many court registry staff. There is also usually a commissioner for taking affidavits at each
+    Service BC office throughout the province.
+{% endblock %}
+
+{% block label %}
+    commissioner
+{% endblock %}

edivorce/apps/core/templates/partials/tooltips/court_file_number.html

@@ -1,8 +1,14 @@
-<span class="tooltip-link" data-toggle="tooltip" data-placement="right" data-html="true" title="
-    <b>Court File Number</b>
-    <br /><br />
+{% extends "partials/tooltips/base.html" %}
+
+{% block title %}
+    Court File Number
+{% endblock %}
+
+{% block inner %}
     This is the filing # given by the Court Registry to your spouse when they filed their portion
-    of the documents. If unknown, please check with your spouse before entering your Court File Number.">
+    of the documents. If unknown, please check with your spouse before entering your Court File Number
+{% endblock %}
+
+{% block label %}
     Court File Number
-    <i class="fa fa-question-circle" aria-hidden="true"></i>
-</span>
+{% endblock %}

edivorce/apps/core/templates/partials/tooltips/court_registry.html

@@ -1,19 +1,24 @@
-<span class="tooltip-link" data-toggle="tooltip" data-placement="right"
-      data-html="true"
-      title="
-                <b>Court Registry</b>
-                <br /><br />
-                You have selected to file at the following Ministry of Attorney General Court Registry location:
-                <br />
-                <br />
-                {% if court_registry_for_filing %}
-                    {{ court_registry_for_filing }}
-                    <br />
-                    {{ court_registry_for_filing_address }}
-                    <br />
-                    {{ court_registry_for_filing_postal_code }}
-                {% else %}
-                    No Court Registry was chosen
-                {% endif %}
-                ">
-          Court Registry<i class="fa fa-question-circle" aria-hidden="true"></i></span>
+{% extends "partials/tooltips/base.html" %}
+
+{% block title %}
+    Court Registry
+{% endblock %}
+
+{% block inner %}
+    You have selected to file at the following Ministry of Attorney General Court Registry location:
+    <br/>
+    <br/>
+    {% if court_registry_for_filing %}
+        {{ court_registry_for_filing }}
+        <br/>
+        {{ court_registry_for_filing_address }}
+        <br/>
+        {{ court_registry_for_filing_postal_code }}
+    {% else %}
+        No Court Registry was chosen
+    {% endif %}
+{% endblock %}
+
+{% block label %}
+    Court Registry
+{% endblock %}

edivorce/apps/core/templates/partials/tooltips/draft_final_order_52.html

@@ -1,10 +1,16 @@
-<span class="tooltip-link" data-toggle="{% if hover %}tooltip-hover{% else %}tooltip{% endif %}" data-placement="right"
-      data-html="true"
-      title="
-                <b>Draft Final Order Form (F52)</b>
-                <br /><br />
-                This will be your divorce order once the judge has signed it.
-                It sets out the court order.
-                <br /><br />
-                - Requires signature by both you and your spouse (but not a signature in front of a commissioner)">
-          Draft Final Order Form (F52)<i class="fa fa-question-circle" aria-hidden="true"></i></span>
+{% extends "partials/tooltips/base.html" %}
+
+{% block title %}
+    Draft Final Order Form (F52)
+{% endblock %}
+
+{% block inner %}
+    This will be your divorce order once the judge has signed it.
+    It sets out the court order.
+    <br/><br/>
+    - Requires signature by both you and your spouse (but not a signature in front of a commissioner)">
+{% endblock %}
+
+{% block label %}
+    Draft Final Order Form (F52)
+{% endblock %}

edivorce/apps/core/templates/partials/tooltips/file.html

@@ -1,7 +1,13 @@
-<span class="tooltip-link" data-toggle="tooltip" data-placement="right"
-      data-html="true"
-      title="
-                <b>File</b>
-                <br /><br />
-                Need tooltip text still">
-          file<i class="fa fa-question-circle" aria-hidden="true"></i></span>
+{% extends "partials/tooltips/base.html" %}
+
+{% block title %}
+    File
+{% endblock %}
+
+{% block inner %}
+    Need tooltip text still
+{% endblock %}
+
+{% block label %}
+    file
+{% endblock %}

edivorce/apps/core/templates/partials/tooltips/form_child_support_37.html

@@ -1,10 +1,16 @@
-<span class="tooltip-link" data-toggle="tooltip" data-placement="right"
-      data-html="true"
-      title="
-                <b>Child Support Affidavit (F37)</b>
-                <br /><br />
-                This form gives facts about your children and child support, including the order you're asking the court for.
-                You must also attach your separation agreement or court orders about children to this form as exhibits.
-                <br /><br />
-                - Required swearing/affirming and signatures by both you and your spouse in front of a commissioner.">
-          Child Support Affidavit (F37)<i class="fa fa-question-circle" aria-hidden="true"></i></span>
+{% extends "partials/tooltips/base.html" %}
+
+{% block title %}
+    Child Support Affidavit (F37)
+{% endblock %}
+
+{% block inner %}
+    This form gives facts about your children and child support, including the order you're asking the court for.
+    You must also attach your separation agreement or court orders about children to this form as exhibits.
+    <br/><br/>
+    - Required swearing/affirming and signatures by both you and your spouse in front of a commissioner.
+{% endblock %}
+
+{% block label %}
+    Child Support Affidavit (F37)
+{% endblock %}

edivorce/apps/core/templates/partials/tooltips/form_desk_order_38.html

@@ -1,9 +1,15 @@
-<span class="tooltip-link" data-toggle="tooltip" data-placement="right"
-      data-html="true"
-      title="
-                <b>Affidavit - Desk Order Divorce Form (F38)</b>
-                <br /><br />
-                This form sets out all the facts of your marriage and separation for the court and gives information about parenting time if you have children.
-                It requires swearing/affirming and signatures by both you and your spouse in front of a commissioner.">
-          {% if text %}{{ text }}{% else %}Affidavit — Desk Order Divorce Form (F38){% endif %}
-    <i class="fa fa-question-circle" aria-hidden="true"></i></span>
+{% extends "partials/tooltips/base.html" %}
+
+{% block title %}
+    Affidavit - Desk Order Divorce Form (F38)
+{% endblock %}
+
+{% block inner %}
+    <br/><br/>
+    This form sets out all the facts of your marriage and separation for the court and gives information about parenting time if you have children.
+    It requires swearing/affirming and signatures by both you and your spouse in front of a commissioner.
+{% endblock %}
+
+{% block label %}
+    Affidavit — Desk Order Divorce Form (F38)
+{% endblock %}

edivorce/apps/core/templates/partials/tooltips/identification_of_applicant.html

@@ -1,9 +1,15 @@
-<span class="tooltip-link" data-toggle="{% if hover %}tooltip-hover{% else %}tooltip{% endif %}" data-placement="right"
-      data-html="true"
-      title="
-                <b>Identification of Applicant (VSA 512)</b>
-                <br /><br />
-                This form is used by the Court to notify Vital Statistics of court-ordered legal changes of name.
-                <br /><br />
-                - Does not require signatures.">
-          Identification of Applicant (VSA 512)<i class="fa fa-question-circle" aria-hidden="true"></i></span>
+{% extends "partials/tooltips/base.html" %}
+
+{% block title %}
+    Identification of Applicant (VSA 512)
+{% endblock %}
+
+{% block inner %}
+    This form is used by the Court to notify Vital Statistics of court-ordered legal changes of name.
+    <br/><br/>
+    - Does not require signatures.
+{% endblock %}
+
+{% block label %}
+    Identification of Applicant (VSA 512)
+{% endblock %}

edivorce/apps/core/templates/partials/tooltips/joint_divorce_proceedings.html

@@ -1,11 +1,17 @@
-<span class="tooltip-link" data-toggle="{% if hover %}tooltip-hover{% else %}tooltip{% endif %}" data-placement="right"
-      data-html="true"
-      title="
-                <b>Registration of Joint Divorce Proceedings (JUS280)</b>
-                <br /><br />
-                This form is for a central divorce registry in Ottawa.
-                They use the form to check to make sure there is no other divorce proceeding pending in Canada.
-                They also keep track of all divorces in Canada.
-                <br /><br />
-                - Does not require signatures.">
-          Registration of Joint Divorce Proceedings (JUS280)<i class="fa fa-question-circle" aria-hidden="true"></i></span>
+{% extends "partials/tooltips/base.html" %}
+
+{% block title %}
+    Registration of Joint Divorce Proceedings (JUS280)
+{% endblock %}
+
+{% block inner %}
+    This form is for a central divorce registry in Ottawa.
+    They use the form to check to make sure there is no other divorce proceeding pending in Canada.
+    They also keep track of all divorces in Canada.
+    <br/><br/>
+    - Does not require signatures.
+{% endblock %}
+
+{% block label %}
+    Registration of Joint Divorce Proceedings (JUS280)
+{% endblock %}

edivorce/apps/core/templates/partials/tooltips/joint_family_claim_1.html

@@ -1,9 +1,16 @@
-<span class="tooltip-link" data-toggle="{% if hover %}tooltip-hover{% else %}tooltip{% endif %}" data-placement="right"
-      data-html="true"
-      title="
-                <b>Notice of Joint Family Claim Form (F1)</b>
-                <br /><br />
-                This form starts your divorce proceeding. It gives the court details about you and your spouse, your marriage and separation, and what you're asking the court for.
-                <br /><br />
-                - Does not require signatures when filed online.">
-          {% if text %}{{ text }}{% else %}Notice of Joint Family Claim{% endif %}<i class="fa fa-question-circle" aria-hidden="true"></i></span>
+{% extends "partials/tooltips/base.html" %}
+
+{% block title %}
+    Notice of Joint Family Claim Form (F1)
+{% endblock %}
+
+{% block inner %}
+    This form starts your divorce proceeding.
+    It gives the court details about you and your spouse, your marriage and separation, and what you'reasking the court for.
+    <br/><br/>
+    - Does not require signatures when filed online.
+{% endblock %}
+
+{% block label %}
+    Notice of Joint Family Claim
+{% endblock %}

edivorce/apps/core/templates/partials/tooltips/online_package_number.html

@@ -1,8 +1,14 @@
-<span class="tooltip-link" data-toggle="tooltip" data-placement="right"
-      data-html="true"
-      title="
-                <b>CSO Online Package #</b>
-                <br /><br />
-                This is the filing # given by the Court Registry to your spouse when they filed their portion
-                of the documents. If unknown, please check with your spouse before entering your Court File Number.">
-          {% if with_cso %}CSO {% endif %}Online Package #<i class="fa fa-question-circle" aria-hidden="true"></i></span>
+{% extends "partials/tooltips/base.html" %}
+
+{% block title %}
+    CSO Online Package #
+{% endblock %}
+
+{% block inner %}
+    This is the filing # given by the Court Registry to your spouse when they filed their portion
+    of the documents. If unknown, please check with your spouse before entering your Court File Number.
+{% endblock %}
+
+{% block label %}
+    {% if with_cso %}CSO {% endif %}Online Package #
+{% endblock %}

edivorce/apps/core/templates/partials/tooltips/proof_of_marriage.html

@@ -1,10 +1,16 @@
-<span class="tooltip-link" data-toggle="{% if hover %}tooltip-hover{% else %}tooltip{% endif %}" data-placement="right"
-      data-html="true"
-      title="
-                <b>Proof of marriage</b>
-                <br /><br />
-                To get a divorce, you need an original marriage certificate or certified true copy of your registration of marriage to prove you are married.
-                There are other options described in this tool if you can't get a copy of your marriage certificate or registration of marriage.
-                <br /><br />
-                - Does not require signatures.">
-          Proof of marriage<i class="fa fa-question-circle" aria-hidden="true"></i></span>
+{% extends "partials/tooltips/base.html" %}
+
+{% block title %}
+    Proof of marriage
+{% endblock %}
+
+{% block inner %}
+    To get a divorce, you need an original marriage certificate or certified true copy of your registration of marriage to prove you are married.
+    There are other options described in this tool if you can't get a copy of your marriage certificate or registration of marriage.
+    <br/><br/>
+    - Does not require signatures.
+{% endblock %}
+
+{% block label %}
+    Proof of marriage
+{% endblock %}

edivorce/apps/core/templates/partials/tooltips/requisition_form_35.html

@@ -1,10 +1,16 @@
-<span class="tooltip-link" data-toggle="{% if hover %}tooltip-hover{% else %}tooltip{% endif %}" data-placement="right"
-      data-html="true"
-      title="
-                <b>Requisition Form (F35)</b>
-                <br /><br />
-                This form is a request to the Court for your application for divorce.
-                It tells the court that you want a divorce and outlines all the documents you are filing in support of your application.
-                <br /><br />
-                - Does not require signatures when filed online.">
-          Requisition Form (F35)<i class="fa fa-question-circle" aria-hidden="true"></i></span>
+{% extends "partials/tooltips/base.html" %}
+
+{% block title %}
+    Requisition Form (F35)
+{% endblock %}
+
+{% block inner %}
+    This form is a request to the Court for your application for divorce.
+    It tells the court that you want a divorce and outlines all the documents you are filing in support of your application.
+    <br/><br/>
+    - Does not require signatures when filed online.
+{% endblock %}
+
+{% block label %}
+    Requisition Form (F35)
+{% endblock %}

edivorce/apps/core/templates/partials/tooltips/swear_affirm.html

@@ -1,14 +1,21 @@
-<span class="tooltip-link" data-toggle="tooltip" data-placement="right"
-      data-html="true"
-      title="
-                <b>Swear/Affirm</b>
-                <br /><br />
-                An &quot;affidavit&quot; is a written document that contains facts that you must swear under oath (usually on a Bible or other religious book) or affirm
-        (non-religious promise) to be true. After you swear or affirm, the affidavit is evidence of the facts it sets out, just as if you took the
-        stand in a courtroom to provide those facts.
-        <br /><br />
-        To swear or affirm an affidavit, you must meet with a commissioner for taking oaths. The
-        commissioner (often a lawyer, notary public or registry clerk) will check your photo id to make sure you are who you say you are, ask you if
-        you understand the contents of your affidavit, then ask you to swear or affirm that the contents are true. The commissioner will then watch
-        you sign the document before signing it themselves.">
-    {% if text %}{{ text }}{% else %}swear/affirm{% endif %}<i class="fa fa-question-circle" aria-hidden="true"></i></span>
+{% extends "partials/tooltips/base.html" %}
+
+{% block title %}
+    Swear/Affirm
+{% endblock %}
+
+{% block inner %}
+    An &quot;affidavit&quot; is a written document that contains facts that you must swear under oath (usually on a Bible or other religious book)
+    or affirm (non-religious promise) to be true.
+    After you swear or affirm, the affidavit is evidence of the facts it sets out,
+    just as if you took the stand in a courtroom to provide those facts.
+    <br/><br/>
+    To swear or affirm an affidavit, you must meet with a commissioner for taking oaths.
+    The commissioner (often a lawyer, notary public or registry clerk) will check your photo id to make sure you are who you say you are,
+    ask you if you understand the contents of your affidavit, then ask you to swear or affirm that the contents are true.
+    The commissioner will then watch you sign the document before signing it themselves.
+{% endblock %}
+
+{% block label %}
+    swear/affirm
+{% endblock %}

edivorce/apps/core/templates/partials/tooltips/virtual_session.html

@@ -1,12 +1,18 @@
-<span class="tooltip-link" data-toggle="{% if hover %}tooltip-hover{% else %}tooltip{% endif %}" data-placement="right"
-      data-html="true"
-      title="
-                <b>Virtual Session</b>
-                <br /><br />
-                When you select Virtual Session you will be contacted via email by the court registry to setup an online
-                signing of your affidavit(s). Note that you will require a smart phone with a camera that runs iOS
-                version X or Android version Y or a computer with a camera running Windows or MacOS. During the session
-                both you and the court registry clerk will sign your forms separately and then upload them back in this
-                tool. When you choose this option you will also need to scan and upload the unsigned affidavit(s) to
-                this site before the virtual session.">
-          virtual session<i class="fa fa-question-circle" aria-hidden="true"></i></span>
+{% extends "partials/tooltips/base.html" %}
+
+{% block title %}
+    Virtual Session
+{% endblock %}
+
+{% block inner %}
+    When you select Virtual Session you will be contacted via email by the court registry to setup an online
+    signing of your affidavit(s). Note that you will require a smart phone with a camera that runs iOS
+    version X or Android version Y or a computer with a camera running Windows or MacOS. During the session
+    both you and the court registry clerk will sign your forms separately and then upload them back in this
+    tool. When you choose this option you will also need to scan and upload the unsigned affidavit(s) to
+    this site before the virtual session.
+{% endblock %}
+
+{% block label %}
+    virtual session
+{% endblock %}