Add tooltip to the details icon. #630

css/Properties/PropertyTitle.scss

@@ -30,4 +30,7 @@
 	.property__title--icon {
 		background-position: center right;
 	}
+	.icon-details {
+		margin-left: 7px;
+	}
 }

src/components/ContactDetails/ContactDetailsProperty.vue

@@ -22,7 +22,7 @@
 
 <template>
 	<!-- If not in the rfcProps then we don't want to display it -->
-	<component v-tooltip.right="propModel.info" v-if="propModel && propType !== 'unknown'"
+	<component v-if="propModel && propType !== 'unknown'"
 		:is="componentInstance" :select-type.sync="selectType" :prop-model="propModel"
 		:value.sync="value" :is-first-property="isFirstProperty" :property="property"
 		:is-last-property="isLastProperty" :class="{'property--last': isLastProperty}" :contact="contact"

src/components/Properties/PropertyDateTime.vue

@@ -23,7 +23,8 @@
 <template>
 	<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
 		<!-- title if first element -->
-		<property-title v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName" />
+		<property-title v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+			:info="propModel.info" />
 
 		<div class="property__row">
 			<!-- type selector -->

src/components/Properties/PropertyTitle.vue

@@ -24,6 +24,8 @@
 	<h3 class="property__title property__row">
 		<div :class="icon" class="property__label property__title--icon" />
 		{{ readableName }}
+		<!-- display tooltip with hint if available -->
+		<div v-tooltip.right="info" v-if="info" class="icon-details" />
 	</h3>
 </template>
 
@@ -41,6 +43,11 @@ export default {
 			type: String,
 			default: '',
 			required: true
+		},
+		info: {
+			type: String,
+			default: '',
+			required: false
 		}
 	}
 }