OO-4539: let more freedom to bootstrap tooltip to place itself

src/main/webapp/static/js/openolat/glossaryhighlighter.css

@@ -12,17 +12,88 @@
 	visibility: visible;
 }
 
+.tooltip.top {
+	margin-top: -3px;
+	padding: 5px 0;
+}
+
+.tooltip.right {
+	margin-top: 3px;
+	padding: 0 5px;
+}
+
 .tooltip.bottom {
 	margin-top: 3px;
 	padding: 5px 0 0 0;
 }
 
+.tooltip.left {
+	margin-top: -3px;
+	padding: 0 5px;
+}
+
+.tooltip.top .tooltip-arrow {
+	bottom: 0;
+	left: 50%;
+	margin-left: -5px;
+	border-width: 5px 5px 0;
+	border-top-color: #aaa;
+}
+
+.tooltip.top-left .tooltip-arrow {
+	bottom: 0;
+	right: 5px;
+	margin-bottom: -5px;
+	border-width: 5px 5px 0;
+	border-top-color: #aaa;
+}
+
+.tooltip.top-right .tooltip-arrow {
+	bottom: 0;
+	left: 5px;
+	margin-bottom: -5px;
+	border-width: 5px 5px 0;
+	border-top-color: #aaa;
+}
+
+.tooltip.right .tooltip-arrow {
+	top: 50%;
+	left: 0;
+	margin-top: -5px;
+	border-width: 5px 5px 5px 0;
+	border-right-color: #aaa;
+}
+
+.tooltip.left .tooltip-arrow {
+	top: 50%;
+	right: 0;
+	margin-top: -5px;
+	border-width: 5px 0 5px 5px;
+	border-left-color: #aaa;
+}
+
 .tooltip.bottom .tooltip-arrow {
-    top: 0;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 0 5px 5px;
-    border-bottom-color: #aaa;
+	top: 0;
+	left: 50%;
+	margin-left: -5px;
+	border-width: 0 5px 5px;
+	border-bottom-color: #aaa;
+}
+
+.tooltip.bottom-left .tooltip-arrow {
+	top: 0;
+	right: 5px;
+	margin-top: -5px;
+	border-width: 0 5px 5px;
+	border-bottom-color: #aaa;
+}
+
+.tooltip.bottom-right .tooltip-arrow {
+	top: 0;
+	left: 5px;
+	margin-top: -5px;
+	border-width: 0 5px 5px;
+	border-bottom-color: #aaa;
 }
 
 .tooltip-inner {

src/main/webapp/static/js/openolat/glossaryhighlighter.js

@@ -190,7 +190,7 @@ function o_tm_addExtToolTip(glossaryMainTerm, highlightString, occurrence){
 					//bootstrap tooltip
 					html: true,
 					container:'body',
-					placement: 'bottom',
+					placement: 'auto bottom',
 					title: function() {
 				        var elem = jQuery(this);
 				        jQuery.ajax(glossUrl).always(function(data, textStatus, jqXHR) {