improve tooltips

css/main.css

@@ -297,6 +297,3 @@ h3 {
 	transform: scale(1.8);
 }
 
-.tooltipster-noir .tooltipster-content {
-	font-family: 'Helvetica Neue', serif;
-}
\ No newline at end of file

css/tooltip.css

@@ -9,4 +9,8 @@
 .tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content {
 	color: blue;
 	padding: 8px;
+}
+
+.tooltipster-noir .tooltipster-content {
+	font-family: 'Helvetica Neue', serif;
 }
\ No newline at end of file

js/main.js

@@ -127,6 +127,7 @@ $(document).ready(function() {
   });
   $('#tf-wf-tooltip').tooltipster('content', $("#tf-wf-tip").html());
   $('#warning-tooltip').tooltipster('content', $("#warning-tip").html());
+  $('#export-button').tooltipster('content', $("#export-tip").html());
 
 
   $('#cluster-box').change(function() {

run.html

@@ -170,7 +170,7 @@
 								<p>
 									<button class="btn btn-primary" id="submit-pattern" onclick="javascript:search_pattern()" style="margin-right:10px">Search</button>
 									<button class="btn btn-primary" id="save-button" onclick="javascript:save_pattern()" style="margin-right:10px">Save</button>
-									<button class="btn btn-primary" id="export-button" onclick="javascript:run_export()" style="margin-right:10px">Export</button>
+									<button class="btn btn-primary tooltip-desc" id="export-button" onclick="javascript:run_export()" style="margin-right:10px">Export</button>
 									<label>
 										<input type="checkbox" id="cluster-box">Clustering</input>
 										<span style="display: none;" id="cluster-span">
@@ -284,7 +284,12 @@
 
 	<!-- tooltip content -->
 	<div id="warning-tip" style="display: none;">
-		<p>No corpus found with the requested name, the closest one (wrt Levenshtein distance) is chosen</p>
+		<p>No corpus found with the requested name, the closest one (wrt Levenshtein distance) is chosen.</p>
+	</div>
+
+	<!-- tooltip content -->
+	<div id="export-tip" style="display: none;">
+		<p>Export sentence text of each occurrences like in a concordancer.</p>
 	</div>
 
 	<!-- tooltip content -->

vendor/tooltipter/tooltipster.css

 /* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */
 .tooltipster-default {
-	border-radius: 5px; 
+	border-radius: 5px;
 	border: 2px solid #000;
 	background: #4c4c4c;
 	color: #fff;
@@ -65,7 +65,7 @@
 }
 .tooltipster-arrow span, .tooltipster-arrow-border {
 	display: block;
-	width: 0; 
+	width: 0;
 	height: 0;
 	position: absolute;
 }
@@ -113,7 +113,7 @@
 }
 .tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border {
 	border-top: 8px solid transparent !important;
-	border-bottom: 8px solid transparent !important; 
+	border-bottom: 8px solid transparent !important;
 	border-left: 8px solid;
 	top: 50%;
 	margin-top: -7px;
@@ -121,13 +121,13 @@
 }
 .tooltipster-arrow-left .tooltipster-arrow-border {
 	border-top: 9px solid transparent !important;
-	border-bottom: 9px solid transparent !important; 
+	border-bottom: 9px solid transparent !important;
 	border-left: 9px solid;
 	margin-top: -8px;
 }
 .tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border {
 	border-top: 8px solid transparent !important;
-	border-bottom: 8px solid transparent !important; 
+	border-bottom: 8px solid transparent !important;
 	border-right: 8px solid;
 	top: 50%;
 	margin-top: -7px;
@@ -135,7 +135,7 @@
 }
 .tooltipster-arrow-right .tooltipster-arrow-border {
 	border-top: 9px solid transparent !important;
-	border-bottom: 9px solid transparent !important; 
+	border-bottom: 9px solid transparent !important;
 	border-right: 9px solid;
 	margin-top: -8px;
 }
@@ -175,10 +175,10 @@
 	-ms-transform: scale(1,1);
 	transform: scale(1,1);
 	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
-	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
-	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
-	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
+	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
+	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
+	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
+	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 }
 
@@ -203,10 +203,10 @@
 	-ms-transform: rotateZ(0deg);
 	transform: rotateZ(0deg);
 	-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);
-	-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 
-	-moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 
-	-ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 
-	-o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 
+	-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
+	-moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
+	-ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
+	-o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
 	transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
 }
 
@@ -218,11 +218,11 @@
 	-ms-transition-property: top;
 	transition-property: top;
 	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
-	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
-	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
-	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
-	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
+	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
+	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
+	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
+	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
+	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 }
 .tooltipster-fall-show {
 }
@@ -244,10 +244,10 @@
 	-ms-transition-property: left;
 	transition-property: left;
 	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
-	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
-	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
-	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
+	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
+	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
+	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
+	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 }
 .tooltipster-slide.tooltipster-slide-show {