paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-10 08:56:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

tooltips: Use TippyJS instead of HTML title in recipient bars.

Browse Source 
Additional changes are added in `tippyjs.js` to ensure
that the tooltip doesn't hide behind the message
box or it is not limited by the parent container, in
case of recipient bar icons.
This commit is contained in:
akshatdalton
2021-06-26 18:21:25 +00:00
committed by Tim Abbott
parent 2aec7b1644
commit 505502a993
2 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
static/js/tippyjs.js
View File

@@ -176,4 +176,13 @@ export function initialize() {
instance.destroy(); instance.destroy();
}, },
}); });
// In case of recipient bar icons, following change
// ensures that tooltip doesn't hide behind the message
// box or it is not limited by the parent container.
delegate("body", {
target: ".recipient_bar_icon",
placement: "top",
appendTo: () => document.body,
});
} }

8
static/templates/recipient_row.hbs
View File

@@ -39,10 +39,10 @@
{{! edit topic pencil icon }} {{! edit topic pencil icon }}
{{#if always_visible_topic_edit}} {{#if always_visible_topic_edit}}
<i class="fa fa-pencil always_visible_topic_edit recipient_bar_icon hidden-for-spectators" {{#unless realm_allow_message_editing}}style="display: none"{{/unless}} title="{{t 'Edit topic'}}" role="button" tabindex="0" aria-label="{{t 'Edit topic' }}"></i> <i class="fa fa-pencil always_visible_topic_edit recipient_bar_icon hidden-for-spectators" {{#unless realm_allow_message_editing}}style="display: none"{{/unless}} data-tippy-content="{{t 'Edit topic'}}" role="button" tabindex="0" aria-label="{{t 'Edit topic' }}"></i>
{{else}} {{else}}
{{#if on_hover_topic_edit}} {{#if on_hover_topic_edit}}
<i class="fa fa-pencil on_hover_topic_edit recipient_bar_icon hidden-for-spectators" {{#unless realm_allow_message_editing}}style="display: none"{{/unless}} title="{{t 'Edit topic'}}" role="button" tabindex="0" aria-label="{{t 'Edit topic' }}"></i> <i class="fa fa-pencil on_hover_topic_edit recipient_bar_icon hidden-for-spectators" {{#unless realm_allow_message_editing}}style="display: none"{{/unless}} data-tippy-content="{{t 'Edit topic'}}" role="button" tabindex="0" aria-label="{{t 'Edit topic' }}"></i>
{{/if}} {{/if}}
{{/if}} {{/if}}
@@ -51,9 +51,9 @@
</span> </span>
{{#if topic_muted}} {{#if topic_muted}}
<i class="fa fa-bell-slash on_hover_topic_unmute recipient_bar_icon" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" title="{{t 'Unmute topic' }} (M)" role="button" tabindex="0" aria-label="{{t 'Unmute topic' }}"></i> <i class="fa fa-bell-slash on_hover_topic_unmute recipient_bar_icon" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Unmute topic' }} (M)" role="button" tabindex="0" aria-label="{{t 'Unmute topic' }}"></i>
{{else}} {{else}}
<i class="fa fa-bell-slash on_hover_topic_mute recipient_bar_icon hidden-for-spectators" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" title="{{t 'Mute topic' }} (M)" role="button" tabindex="0" aria-label="{{t 'Mute topic' }}"></i> <i class="fa fa-bell-slash on_hover_topic_mute recipient_bar_icon hidden-for-spectators" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Mute topic' }} (M)" role="button" tabindex="0" aria-label="{{t 'Mute topic' }}"></i>
{{/if}} {{/if}}
</span> </span>
<span class="recipient_row_date {{#if group_date_divider_html}}{{else}}hide-date{{/if}}">{{{date}}}</span> <span class="recipient_row_date {{#if group_date_divider_html}}{{else}}hide-date{{/if}}">{{{date}}}</span>