core: Add info button for input fields with title (#1173)

The current solution for titles on input boxes is not obvious to the
user as support varies between bridges. This commit adds an button to
all input boxes with titles in order to make it clear to the user that
additional information is available.

lib/BridgeCard.php

@@ -122,6 +122,11 @@ This bridge is not fetching its content through a secure connection</div>';
 				} elseif($inputEntry['type'] === 'checkbox') {
 					$form .= self::getCheckboxInput($inputEntry, $idArg, $id);
 				}
+
+				if(isset($inputEntry['title']))
+					$form .= '<i class="info" title="' . filter_var($inputEntry['title'], FILTER_SANITIZE_STRING) . '">i</i>';
+				else
+					$form .= '<i></i>';
 			}
 
 			$form .= '</div>';
@@ -152,9 +157,6 @@ This bridge is not fetching its content through a secure connection</div>';
 		if(isset($entry['pattern']))
 			$retVal .= ' pattern="' . $entry['pattern'] . '"';
 
-		if(isset($entry['title']))
-			$retVal .= ' title="' . filter_var($entry['title'], FILTER_SANITIZE_STRING) . '"';
-
 		return $retVal;
 	}
 

static/style.css

@@ -184,12 +184,33 @@ form {
 	content: ' :';
 }
 
+.info {
+	cursor: help;
+	opacity: 0.5;
+	width: 24px;
+	height: 24px;
+	font-size: 16px;
+	font-weight: bold;
+	font-style: italic;
+	line-height: 22px;
+	text-align: center;
+	color: #fff;
+	background-image: radial-gradient(#49afff, #1182DB);
+	-webkit-border-radius: 16px;
+	-moz-border-radius: 16px;
+	border-radius: 16px;
+}
+
+.info:hover {
+	opacity: 1;
+}
+
 @supports (display: grid) {
 
 	.parameters {
 		display: grid;
 		padding: 12px 0;
-		grid-template-columns: 40% max-content;
+		grid-template-columns: 40% max-content 24px;
 		grid-column-gap: 10px;
 		grid-row-gap: 5px;
 	}
@@ -339,6 +360,10 @@ h5 {
 		margin: 3px auto 0;
 	}
 
+	.info {
+		display: none;
+	}
+
 	@supports (display: grid) {
 
 		.parameters {