tooltips: Add italics styling to description of multi-line tooltips.

The second line of a multi-line tooltip generally desctribes the
additional information which helps the major text, i.e. the first
line of the multi-line tooltip, hence it would be a good idea to
add italics styling, to differentiate it from the main title. We
describe a simple ".italic" class for the same.

We also add a shorter line height to this description using the
".tooltip-inner-content" class.
This commit is contained in:
sayamsamal 2022-10-05 21:04:50 +05:30 committed by Tim Abbott
parent 0f213f13ff
commit 9b1d4ca81e
5 changed files with 16 additions and 6 deletions

View File

@ -23,6 +23,10 @@
color: hsla(0, 0%, 100%, 1);
}
.tooltip-inner-content {
line-height: 17px;
}
&[data-placement^="top"] > .tippy-arrow::before {
border-top-color: hsla(0, 0%, 20%, 1);
}

View File

@ -1,13 +1,14 @@
<div class="buddy_list_tooltip_content">
<span class="tooltip_inner_content">{{first_line}}
<span>
{{first_line}}
{{#if show_you}}
<span class="my_user_status">{{t "(you)" }}</span>
{{/if}}
</span>
{{#if second_line}}
<br /><span class="tooltip_inner_content">{{second_line}}</span>
<br /><span class="tooltip-inner-content">{{second_line}}</span>
{{/if}}
{{#if third_line}}
<br /><span class="tooltip_inner_content">{{third_line}}</span>
<br /><span class="tooltip-inner-content">{{third_line}}</span>
{{/if}}
</div>

View File

@ -143,4 +143,9 @@
</div>
</div>
<template id="add-global-time-tooltip">{{#tr}}Add global time<br />Everyone sees global times in their own time zone.{{/tr}}</template>
<template id="add-global-time-tooltip">
<div>
<span>{{#tr}}Add global time{{/tr}}</span><br/>
<span class="tooltip-inner-content italic">{{#tr}}Everyone sees global times in their own time zone.{{/tr}}</span>
</div>
</template>

View File

@ -1,3 +1,3 @@
<strong>{{ title }}</strong>
<br/>
{{t 'Click to view or download.'}}
<span class="tooltip-inner-content italic">{{t 'Click to view or download.'}}</span>

View File

@ -1,7 +1,7 @@
<div>
<span>{{t 'Go to conversation' }}</span>
{{#if display_current_view}}
<p class="narrow_to_compose_recipient_current_view_help">{{display_current_view}}</p>
<p class="narrow_to_compose_recipient_current_view_help tooltip-inner-content italic">{{display_current_view}}</p>
{{/if}}
</div>
{{hotkey_hints "Ctrl" "."}}