Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

tooltips: Add tippy tooltip for search_query. 

Added tippy tooltips for search_open, search_close icon and
search_query input field with hotkey hint `/' by adding a class
`.tippy-zulip-delayed-tooltip` which adds tooltip with
LONG_HOVER_DELAY and default placement top with fallback placement
equal to bottom.

Added tippy tooltip with text `Close` on `.search_close_button`.

Fixes part of #24311
This commit is contained in:
Hardik Dharmani 2023-04-20 14:26:13 +05:30 committed by Tim Abbott
parent 9c866f9be1
commit 941c15b802
2 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/templates/message_view_header.hbs
View File

@ -18,4 +18,8 @@
{{> navbar_icon_and_title }} {{> navbar_icon_and_title }}
</span> </span>
{{/if}} {{/if}}
<span class="search_icon search_closed" role="button"><i class="zulip-icon zulip-icon-search" aria-hidden="true"></i></span> <span class="search_icon search_closed" role="button"><i class="zulip-icon zulip-icon-search tippy-zulip-delayed-tooltip" data-tooltip-template-id="search-query-tooltip-template" aria-hidden="true"></i></span>
<template id="search-query-tooltip-template">
{{t 'Search' }}
{{tooltip_hotkey_hints "/"}}
</template>

12
web/templates/navbar.hbs
View File

@ -19,11 +19,11 @@
<div id="searchbox"> <div id="searchbox">
<form id="searchbox_form" class="navbar-search"> <form id="searchbox_form" class="navbar-search">
<div id="search_arrows" class="pill-container input-append"> <div id="search_arrows" class="pill-container input-append">
<span class="search_icon search_open" ><i class="zulip-icon zulip-icon-search"></i></span> <span class="search_icon search_open"><i class="zulip-icon zulip-icon-search tippy-zulip-delayed-tooltip" data-tooltip-template-id="search-query-tooltip-template"></i></span>
<div contenteditable="true" class="input search-query input-block-level" id="search_query" type="text" placeholder="{{t 'Search' }}" <div contenteditable="true" class="input search-query input-block-level" id="search_query" type="text" placeholder="{{t 'Search' }}"
autocomplete="off" aria-label="{{t 'Search' }}" title="{{t 'Search' }} (/)"> autocomplete="off">
</div> </div>
<button class="btn search_close_button" type="button" id="search_exit" aria-label="{{t 'Exit search' }}"> <button class="btn search_close_button tippy-zulip-delayed-tooltip" type="button" id="search_exit" aria-label="{{t 'Exit search' }}" data-tippy-content="Close">
<i class="zulip-icon zulip-icon-close" aria-hidden="true"></i> <i class="zulip-icon zulip-icon-close" aria-hidden="true"></i>
</button> </button>
</div> </div>
@ -33,10 +33,10 @@
<div id="searchbox_legacy"> <div id="searchbox_legacy">
<form id="searchbox_form" class="navbar-search"> <form id="searchbox_form" class="navbar-search">
<div id="search_arrows" class="input-append"> <div id="search_arrows" class="input-append">
<span class="search_icon search_open" ><i class="zulip-icon zulip-icon-search"></i></span> <span class="search_icon search_open"><i class="zulip-icon zulip-icon-search tippy-zulip-delayed-tooltip" data-tooltip-template-id="search-query-tooltip-template"></i></span>
<input class="search-query input-block-level home-page-input" id="search_query" type="text" placeholder="{{t 'Search' }}" <input class="search-query input-block-level home-page-input" id="search_query" type="text" placeholder="{{t 'Search' }}"
autocomplete="off" aria-label="{{t 'Search' }}" title="{{t 'Search' }} (/)"/> autocomplete="off"/>
<button class="btn search_close_button" type="button" id="search_exit" aria-label="{{t 'Exit search' }}"><i class="zulip-icon zulip-icon-close" aria-hidden="true"></i></button> <button class="btn search_close_button tippy-zulip-delayed-tooltip" type="button" id="search_exit" aria-label="{{t 'Exit search' }}" data-tippy-content="Close"><i class="zulip-icon zulip-icon-close" aria-hidden="true"></i></button>
</div> </div>
</form> </form>
</div> </div>