New tooltip replacing #6050

joomla · Oct 25, 2015 · 97c092b · 97c092b
1 parent c9019cc
commit 97c092b
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 21 deletions.
diff --git a/administrator/templates/isis/css/template-rtl.css b/administrator/templates/isis/css/template-rtl.css
@@ -3988,10 +3988,10 @@ input[type="submit"].btn.btn-mini {
 .tooltip-inner {
 	max-width: 200px;
 	padding: 8px;
-	color: #fff;
+	color: #111;
 	text-align: center;
 	text-decoration: none;
-	background-color: #000;
+	background-color: #fff;
 	-webkit-border-radius: 4px;
 	-moz-border-radius: 4px;
 	border-radius: 4px;
@@ -4008,28 +4008,28 @@ input[type="submit"].btn.btn-mini {
 	left: 50%;
 	margin-left: -5px;
 	border-width: 5px 5px 0;
-	border-top-color: #000;
+	border-top-color: #ddd;
 }
 .tooltip.right .tooltip-arrow {
 	top: 50%;
 	left: 0;
 	margin-top: -5px;
 	border-width: 5px 5px 5px 0;
-	border-right-color: #000;
+	border-right-color: #ddd;
 }
 .tooltip.left .tooltip-arrow {
 	top: 50%;
 	right: 0;
 	margin-top: -5px;
 	border-width: 5px 0 5px 5px;
-	border-left-color: #000;
+	border-left-color: #ddd;
 }
 .tooltip.bottom .tooltip-arrow {
 	top: 0;
 	left: 50%;
 	margin-left: -5px;
 	border-width: 0 5px 5px;
-	border-bottom-color: #000;
+	border-bottom-color: #ddd;
 }
 .popover {
 	position: absolute;
@@ -7830,11 +7830,42 @@ td.nowrap.has-context {
 }
 .tooltip {
 	max-width: 400px;
+	max-width: 400px;
+	opacity: 0;
+	filter: alpha(opacity=0);
+}
+.tooltip.in {
+	opacity: 1;
+	filter: alpha(opacity=100);
 }
 .tooltip-inner {
 	max-width: none;
-	text-align: left;
 	text-shadow: none;
+	padding: 6px 8px;
+	font-size: 13px;
+	border: 2px solid #aaa;
+}
+.tooltip-inner .tooltip-title {
+	display: block;
+	margin: -6px -8px -12px;
+	padding: 6px 10px;
+	font-weight: bold;
+	background: #f5f5f5;
+	-webkit-border-radius: 4px 4px 0 0;
+	-moz-border-radius: 4px 4px 0 0;
+	border-radius: 4px 4px 0 0;
+}
+.tooltip.top .tooltip-arrow {
+	border-top-color: #ddd;
+}
+.tooltip.right .tooltip-arrow {
+	border-right-color: #ddd;
+}
+.tooltip.left .tooltip-arrow {
+	border-left-color: #ddd;
+}
+.tooltip.bottom .tooltip-arrow {
+	border-bottom-color: #ddd;
 }
 th .tooltip-inner {
 	font-weight: normal;

diff --git a/administrator/templates/isis/css/template.css b/administrator/templates/isis/css/template.css
@@ -3988,10 +3988,10 @@ input[type="submit"].btn.btn-mini {
 .tooltip-inner {
 	max-width: 200px;
 	padding: 8px;
-	color: #fff;
+	color: #111;
 	text-align: center;
 	text-decoration: none;
-	background-color: #000;
+	background-color: #fff;
 	-webkit-border-radius: 4px;
 	-moz-border-radius: 4px;
 	border-radius: 4px;
@@ -4008,28 +4008,28 @@ input[type="submit"].btn.btn-mini {
 	left: 50%;
 	margin-left: -5px;
 	border-width: 5px 5px 0;
-	border-top-color: #000;
+	border-top-color: #ddd;
 }
 .tooltip.right .tooltip-arrow {
 	top: 50%;
 	left: 0;
 	margin-top: -5px;
 	border-width: 5px 5px 5px 0;
-	border-right-color: #000;
+	border-right-color: #ddd;
 }
 .tooltip.left .tooltip-arrow {
 	top: 50%;
 	right: 0;
 	margin-top: -5px;
 	border-width: 5px 0 5px 5px;
-	border-left-color: #000;
+	border-left-color: #ddd;
 }
 .tooltip.bottom .tooltip-arrow {
 	top: 0;
 	left: 50%;
 	margin-left: -5px;
 	border-width: 0 5px 5px;
-	border-bottom-color: #000;
+	border-bottom-color: #ddd;
 }
 .popover {
 	position: absolute;
@@ -7830,11 +7830,42 @@ td.nowrap.has-context {
 }
 .tooltip {
 	max-width: 400px;
+	max-width: 400px;
+	opacity: 0;
+	filter: alpha(opacity=0);
+}
+.tooltip.in {
+	opacity: 1;
+	filter: alpha(opacity=100);
 }
 .tooltip-inner {
 	max-width: none;
-	text-align: left;
 	text-shadow: none;
+	padding: 6px 8px;
+	font-size: 13px;
+	border: 2px solid #aaa;
+}
+.tooltip-inner .tooltip-title {
+	display: block;
+	margin: -6px -8px -12px;
+	padding: 6px 10px;
+	font-weight: bold;
+	background: #f5f5f5;
+	-webkit-border-radius: 4px 4px 0 0;
+	-moz-border-radius: 4px 4px 0 0;
+	border-radius: 4px 4px 0 0;
+}
+.tooltip.top .tooltip-arrow {
+	border-top-color: #ddd;
+}
+.tooltip.right .tooltip-arrow {
+	border-right-color: #ddd;
+}
+.tooltip.left .tooltip-arrow {
+	border-left-color: #ddd;
+}
+.tooltip.bottom .tooltip-arrow {
+	border-bottom-color: #ddd;
 }
 th .tooltip-inner {
 	font-weight: normal;

diff --git a/administrator/templates/isis/less/template.less b/administrator/templates/isis/less/template.less
@@ -1043,12 +1043,40 @@ td.nowrap.has-context {
 /* Tweaking of tooltips */
 .tooltip {
 	max-width: 400px;
+	max-width: 400px;
+	.opacity(0);
+	&.in { .opacity(100); }
 }
 
 .tooltip-inner {
 	max-width: none;
-	text-align: left;
 	text-shadow: none;
+	padding: 6px 8px;
+	font-size: @baseFontSize;
+	border: 2px solid #aaa;
+}
+
+.tooltip-inner .tooltip-title {
+	display:block;
+	margin:-6px -8px -12px;
+	padding:6px 10px;
+	font-weight: bold;
+	background:@tableBackgroundHover;
+	.border-radius(@baseBorderRadius @baseBorderRadius 0 0);
+}
+.tooltip {
+	&.top .tooltip-arrow {
+		border-top-color: @tooltipArrowColor;
+	}
+	&.right .tooltip-arrow {
+		border-right-color: @tooltipArrowColor;
+	}
+	&.left .tooltip-arrow {
+		border-left-color: @tooltipArrowColor;
+	}
+	&.bottom .tooltip-arrow {
+		border-bottom-color: @tooltipArrowColor;
+	}
 }
 
 th .tooltip-inner {

diff --git a/administrator/templates/isis/less/variables.less b/administrator/templates/isis/less/variables.less
@@ -260,10 +260,10 @@
 
 // Tooltips and popovers
 // -------------------------
-@tooltipColor:            #fff;
-@tooltipBackground:       #000;
+@tooltipColor:            #111;
+@tooltipBackground:       #fff;
 @tooltipArrowWidth:       5px;
-@tooltipArrowColor:       @tooltipBackground;
+@tooltipArrowColor:       #ddd;
 
 @popoverBackground:       #fff;
 @popoverArrowWidth:       10px;

diff --git a/libraries/cms/html/html.php b/libraries/cms/html/html.php
@@ -917,12 +917,12 @@ public static function tooltipText($title = '', $content = '', $translate = 1, $
 			// Use only the title, if title and text are the same.
 			elseif ($title == $content)
 			{
-				$result = '<strong>' . $title . '</strong>';
+				$result = '<span class="tooltip-title">' . $title . '</span>';
 			}
 			// Use a formatted string combining the title and content.
 			elseif ($content != '')
 			{
-				$result = '<strong>' . $title . '</strong><br />' . $content;
+				$result = '<span class="tooltip-title">' . $title . '</span><br />' . $content;
 			}
 			else
 			{

diff --git a/templates/protostar/css/template.css b/templates/protostar/css/template.css
@@ -7284,7 +7284,7 @@ figcaption {
 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0076b2', GradientType=0);
 }
 .categories-list .collapse {
-	margin-left: 20px;
+	margin: 0 0 0 20px;
 }
 @media (max-width: 480px) {
 	.item-info > span {