nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Disable Tooltip on Search Component

SebastianKrings

Hi,

there is a tooltip on the input which simply shows the previous placeholder/watermark.
Its gone, after typing any input.

I would like to disable this tooltip at all.

In case the locator is enabled as single source its gone and replaced by a locator message.
This shouldn't be disabled.

Seen on the sample here:
https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-search/

BTW:
Why dont you put samples into the docs any more as we were used to have on the old widget docs.
To be honest, I often am googlin for the widgets doc to get the samples related and their codepens.
Hope this will come back for components as well.

Find more posts tagged with

Accepted answers

Noah Sager

Great, thanks @SebastianKrings. I meant for any arcgis component, not just search, but we'll start with search and re-examine our tooltips story.

SebastianKrings

its placed within an autocomplete, not an input.

<calcite-autocomplete autocomplete="off" class="autocomplete" overlay-positioning="fixed" title="Alle" alignment="start" placement="bottom-start" scale="m" status="idle" icon="search" max-length="128" name="" calcite-hydrated="">

Placing the following code into any one time method, removes the tooltip once.
On any change of the source I need to watch on that an re-run this code.

Kinda hacky, hoped for a more build-in solution.

<arcgis-search #search ... />
	

private readonly _searchRef = viewChild.required<ElementRef<HTMLArcgisSearchElement>>('search');
const searchElement = this._searchRef().nativeElement;

searchElement.addEventListener('arcgisReady', () => {
	// Das calcite-autocomplete Element im ersten Shadow DOM finden
	const autocomplete = searchElement.shadowRoot?.querySelector('calcite-autocomplete');
	
	autocomplete?.removeAttribute('title');
});

I tried the arcgisPropertyChange but this is not fired when changing the active search source via dropdown.

(arcgisPropertyChange)="searchPropertyChange($event)"

    searchPropertyChange(event: CustomEvent<{ name: String }>) {
        if (event?.detail?.name === 'active-source') {
            const autocomplete = this._searchRef().nativeElement.shadowRoot?.querySelector('calcite-autocomplete');
            autocomplete?.removeAttribute('title');
        }
    }

The breakpoint on the if is never hit.
Just noticed, that there is no attribute-name for searchSource like search-source. May that is an indicator that this property is not part of the event at all?

All comments

SebastianKrings

Hi,

Short: yes regarding search component

Long:
regarding the search component removing the tooltip is the only use case with duplicate text/use case.
Regarding search there is no use case to modify it.

On other ui components like calcite also, we already am showing different tooltips. But not regarding the search.

Noah Sager

Hi @SebastianKrings:

@SebastianKrings wrote:

1)
From our point of view a tooltip should not show te exact same information as e.g. a label or watermark. It then just duplicates the exactly same information.
How does this enhance accessibility?

Short digression: We customized actions in our apps in that way, that when they are only shown by icon, then a tooltip is activated. If there is enough space and next to the action the text enabled is set and shown, then the tooltip is deactived since it literally would show the same characters as the text already does.

I understand the confusion with duplicated information between a tooltip and a label or placeholder text. It sounds like that's the only case where you want the ability to remove a tooltip, and you do not have use cases for editing or adding tooltips. Do I have that correct?

MatthewDriscoll

The discussion and my solution can be found here.

SebastianKrings

Hi @Noah-Sager :

1)
From our point of view a tooltip should not show te exact same information as e.g. a label or watermark. It then just duplicates the exactly same information.
How does this enhance accessibility?

Short digression: We customized actions in our apps in that way, that when they are only shown by icon, then a tooltip is activated. If there is enough space and next to the action the text enabled is set and shown, then the tooltip is deactived since it literally would show the same characters as the text already does.

2)
How about simply putting direct links then into the docs?
Like:
https://developers.arcgis.com/javascript/latest/sample-code/?search=search

@MatthewDriscoll :

What do you mean with prefix-only? the kind of "contains"-search which seems to be turned into a "any word starts with but not contains"?

I also am struggling with this since out upgrade.
Is that documented somewhere? This will become a pain to our customer too since we already approved to support that and now since the update its gone.

I already posted a reply here, but am not getting response unfortunately. Am thinking about to open a new discussion.

https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/search-widget-4-25-deep-searching-feature-layer/m-p/1699250#M88396

Noah Sager

Yeah, I hear you @MatthewDriscoll. I think we've chatted about this before. Always open to feedback though, so I'll keep monitoring that Idea, I just don't see us making a change there in the near future.

MatthewDriscoll

Hi, @Noah-Sager . For me personally I stopped using the Search component completely since you switched to prefix only. Pretty much makes the component useless for my purposes.

Idea posted here.

In the newer version, if I am looking for 'Driscoll' and in my table there is a 'MatthewDriscoll', the new search component will never find it.

Noah Sager

Hi @SebastianKrings and @MatthewDriscoll. Thanks for posting your questions and thoughts here. There are a couple things to address.

1) Disabling tooltips. We like tooltips because they can enhance the overall user experience, and are an important component of web accessibility. In general, the tooltip story for our components is consistent, so this is not just about Search. To help us better understand, why do you want to disable a tooltip? Would you want to also be able to edit/customize or add a tooltip?

2) Samples in component docs. Our component doc is different from our widget doc, and our component doc is still being updated and refined. We appreciate your patience. This will improve. Also, have you seen the updated Samples page? It is super easy to filter and search for relevant samples: https://developers.arcgis.com/javascript/latest/sample-code/

SebastianKrings

its placed within an autocomplete, not an input.

<calcite-autocomplete autocomplete="off" class="autocomplete" overlay-positioning="fixed" title="Alle" alignment="start" placement="bottom-start" scale="m" status="idle" icon="search" max-length="128" name="" calcite-hydrated="">

Placing the following code into any one time method, removes the tooltip once.
On any change of the source I need to watch on that an re-run this code.

Kinda hacky, hoped for a more build-in solution.

<arcgis-search #search ... />
	

private readonly _searchRef = viewChild.required<ElementRef<HTMLArcgisSearchElement>>('search');
const searchElement = this._searchRef().nativeElement;

searchElement.addEventListener('arcgisReady', () => {
	// Das calcite-autocomplete Element im ersten Shadow DOM finden
	const autocomplete = searchElement.shadowRoot?.querySelector('calcite-autocomplete');
	
	autocomplete?.removeAttribute('title');
});

I tried the arcgisPropertyChange but this is not fired when changing the active search source via dropdown.

(arcgisPropertyChange)="searchPropertyChange($event)"

    searchPropertyChange(event: CustomEvent<{ name: String }>) {
        if (event?.detail?.name === 'active-source') {
            const autocomplete = this._searchRef().nativeElement.shadowRoot?.querySelector('calcite-autocomplete');
            autocomplete?.removeAttribute('title');
        }
    }

The breakpoint on the if is never hit.
Just noticed, that there is no attribute-name for searchSource like search-source. May that is an indicator that this property is not part of the event at all?

MatthewDriscoll

Sorry, not many have moved onto components yet. Try this.

<arcgis-search
  id="search"
  popup-disabled
></arcgis-search>

My guess is the title is now behind the shadow dom. So you might need to wait until the component is ready.

const search = document.getElementById("search");

search.addEventListener("arcgisReady", () => {

  // access internal input inside shadow DOM
  const input = search.shadowRoot?.querySelector("input");

  // remove browser tooltip
  input?.removeAttribute("title");

});

SebastianKrings

Hi,

thanks for reaching out.
Despite youre using old widget, I cannot see any title on the input. Do you?

MatthewDriscoll

I believe the tool tip comes from the title.

const search = new Search({
  view: view
});

view.ui.add(search, "top-right");

search.when(() => {
  const input = search.container.querySelector("input");

  if (input) {
    input.removeAttribute("title");
  }
})

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.