Adding hints to search field

[Fiona]

I would like to include a little "info" icon for the HTML5 output's search bar that has a pop-up with search hints and tips in it. I know how to add a pop-up within a topic, but am not being successful in my attempts to translate this to the search field. I don't want to change the default text that is displayed in that field, just add an "info" icon and pop-up.

I know that I can set the tooltip property for the search icon (not the whole field as far as I'm aware), but that can't include any formatting and won't help when viewing on a tablet, hence I'm hoping an icon and pop-up is feasible. A drop-down from the icon could be the way to go, but again I'd need some advice on implementing this by the search bar rather than within a topic.

There was a webinar on this a while ago but it didn't cover how to do it, just that it was possible (https://www.madcapsoftware.com/webinars ... experience). My search of these forums has been fruitless – my apologies if this is already discussed elsewhere and I missed it.

Any help appreciated. Thanks. Fiona

[Nita Beck]

I don’t think you can add hints directly to the search bar, as you envision.

Rather, you can create a custom Search Results page and then add the hints to that page, probably at the top of the page. I’m pretty sure that this is what MadCap themselves do for their Search Results page in the Flare Help system.

I’m not on Flare at the moment, else I’d dig into some old projects. Meantime, Flare’s Help covers how to set up a custom Search Results page: https://help.madcapsoftware.com/flare20 ... esults.htm

HTH

[Fiona]

Thanks Nita. I have already done that, I was just hoping it would be possible to make the tips visible prior to performing a search, for example, by having an information icon next to the search bar.

[Nita Beck]

I see. I think that you can accomplish this with a custom solution involving a script (and maybe some CSS, too?) that would supply and position the popup. This would be totally out of the Flare box. I don't readily have anything to share, but I'm reminded of a popup that I had to maintain for a client once, one that another consultant had invented a few years earlier. I had to make it accessibility compliant, so had to dig into how it worked. Can't share it as it's proprietary, but I mention it to say that, yes, you can likely achieve what you're after with a custom solution.

Regarding offering user instructions for searching, many of the Help systems I've designed include a "How to use the Help system" topic in which searching and navigation are discussed. Maybe that's something you could add?

[jimgilliam]

Fiona, I know this response is late, but I still wanted to share. I have a toggler next to a Search Bar Proxy. Is this similar to what you were wanting?

search-dropdown.gif

Here's how I did it.
1. Create a snippet for the search bar proxy.
2. Create the layout that you want.
3. Create a Name for the element.
4. Create a toggler.

Here is how my snippet code looks:

Code: Select all

<div class="doctjs-ign-primary-search-container">
            <MadCap:searchBarProxy data-mc-skin="/Project/Skins/PrimarySearchBarSkin.flskn" MadCap:targetName="keystonesearchbarproxy" />
            <!-- The below code is the toggler and the drop-down content. -->
            <div class="doct_font_color_fog doct_font_size_smallest doct_searchbar_label_text" id="doctid_search_settings">
                <MadCap:toggler targets="auto-focus" class="auto-focus-searchbar">
                </MadCap:toggler>
            </div>
            <div class="doct_font_color_black doct_font_size_smallest doct_auto_focus_text_container" MadCap:targetName="auto-focus">
                <p>When enabled, this sets focus on the search input field, meaning you can start typing without clicking it. The browser saves your preference. Try it out: Enable this feature and refresh the page to see the result.</p>
                <p><span class="doct_font_style_bold">Caution:</span> If you use assistive technologies like screen readers and keyboard navigation apps, enabling this feature might interfere with them while using Ignite Help.</p>
            </div>
        </div>

This is my related CSS:

Code: Select all

MadCap|toggler.auto-focus-searchbar	/*Styles the searchbar auto-focus option toggler.*/
{
	mc-closed-image-alt-text: Skin / Formats / TogglerClosedAltText(Closed);
	mc-image-position: left;
	mc-image-spacing: 5px;
	mc-open-image: url('resources:Images/WebHelp/minus.png');
	mc-open-image-alt-text: Skin / Formats / TogglerOpenAltText(Open);
	float: left;
	mc-closed-image: url('../Images/Keystone_Assets/UI_and_Branding_Assets/Buttons/Search_Bar/question2.svg');
}

.auto_focus_search_preference
{
	float: left;
	margin-right: 0.5rem;
	color: var(--key_color_core_blue);
}

div.doct_searchbar_label_text	/* Removes the margin so that the text is closer to the search bar. */
{
	line-height: 0rem;
}

div.doct_auto_focus_text_container	/* Styles the container that holds the auto-focus descriptive text. */
{
	position: absolute;
	border: solid 1px var(--key_color_fog);
	background-color: var(--key_color_white);
	border-radius: 8px;
	padding-left: 8px;
	padding-right: 8px;
	margin-top: 20px;
	border-top: solid 8px var(--key_color_blue);
	box-shadow: 0 2px 5px var(--key_color_mist);
	width: 20%;
}

Hope this helps you and others.

Jim