feat(tooltip): add tooltip title styles

telerik · May 31, 2018 · 23be01a · 23be01a
1 parent 05928e0
commit 23be01a
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/packages/default/scss/tooltip/_layout.scss b/packages/default/scss/tooltip/_layout.scss
@@ -4,6 +4,7 @@ $tooltip-closable-padding-x: $window-titlebar-padding-x !default;
 $tooltip-closable-padding-y: $window-titlebar-padding-y !default;
 $tooltip-closable-content-padding: calc(#{$icon-size} + #{$icon-spacing}) !default;
 $tooltip-font-size: $font-size !default;
+$tooltip-title-font-size: $font-size-lg !default;
 $tooltip-line-height: $line-height !default;
 $tooltip-callout-size: 12px !default;
 
@@ -25,6 +26,12 @@ $tooltip-callout-size: 12px !default;
         }
     }
 
+    .k-tooltip-title {
+        display: inline-flex;
+        padding: $tooltip-padding-y 0;
+        font-size: $tooltip-title-font-size;
+    }
+
     .k-tooltip-content {
         overflow: hidden;
         text-overflow: ellipsis;
@@ -34,6 +41,12 @@ $tooltip-callout-size: 12px !default;
         padding: $tooltip-closable-padding-y $tooltip-closable-padding-x;
         line-height: normal;
 
+        .k-tooltip-title {
+            display: inline-flex;
+            padding: 0 ($tooltip-closable-content-padding) ($tooltip-closable-padding-y) 0;
+            line-height: 1;
+        }
+
         .k-tooltip-content {
             padding-right: $tooltip-closable-content-padding;
 

diff --git a/tests/visual/tooltip.html b/tests/visual/tooltip.html
@@ -56,6 +56,35 @@
             </div>
         </section>
 
+        <section class="dark">
+            <div class="k-animation-container">
+                <div role="tooltip" class="k-widget k-tooltip k-popup k-group k-reset">
+                    <span class="k-tooltip-title">Some title</span>
+                    <div class="k-tooltip-content">
+                        <!-- template -->
+                        Tooltip content content content
+                    </div>
+                    <div class="k-callout k-callout-e"></div>
+                </div>
+            </div>
+        </section>
+
+        <section class="dark">
+                <div class="k-animation-container">
+                    <div role="tooltip" class="k-widget k-tooltip k-tooltip-closable k-popup k-group k-reset">
+                        <span class="k-tooltip-title">Some title closable ggy</span>
+                        <div class="k-tooltip-button">
+                            <a href="#" class="k-icon k-i-close" title="Close"></a>
+                        </div>
+                        <div class="k-tooltip-content">
+                            <!-- template -->
+                            Tooltip content
+                        </div>
+                        <div class="k-callout k-callout-e"></div>
+                    </div>
+                </div>
+            </section>
+
         <section class="dark">
             <div class="k-animation-container">
                 <div role="tooltip" class="k-widget k-tooltip k-popup k-group k-reset">