Select to view content in your preferred language

Disable Tooltip on Search Component

101
6
yesterday
SebastianKrings
Frequent Contributor

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.

SebastianKrings_0-1779297631326.png

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

SebastianKrings_1-1779297708837.png

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.

6 Replies
MatthewDriscoll
MVP Alum

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");
  }
})
0 Kudos
SebastianKrings
Frequent Contributor

Hi,

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

SebastianKrings_0-1779309388708.png

 

0 Kudos
MatthewDriscoll
MVP Alum

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");

});
0 Kudos
SebastianKrings
Frequent Contributor

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?

SebastianKrings_0-1779319384514.png

 



Noah-Sager
Esri Regular Contributor

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/

0 Kudos
MatthewDriscoll
MVP Alum

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.  

0 Kudos