Hi there!
We recently updated some of our dependencies and our grid is now displaying tooltips on elements where we don't want tooltips - primarily on the column menus. Our intentional tooltips continue to work as expected.
The first screenshot shows the tooltip working within our custom cell in the grid
Initially we saw this behavior:
We've implemented a filter function to fire tooltips on select elements, but the default browser tooltip still displays
Our setup is:
- We have wrapped our `Grid` in the `Tooltip` context. We are only using one `Tooltip` context, so there should not be any conflict.
<>
<Tooltip
position="bottom"
anchorElement="target"
openDelay={100}
className="dc-kendo-tooltip"
parentTitle={true}
filter={filterElements}
>
{loading ? (
<CenterContent showLoader>
<GridLoader
/>
</CenterContent>
) : (
<DataclayKendoGrid
{...dataState}
data={gridData.map(data => ({
...data,
[SELECTED_FIELD]: selectedState[idGetter(data)],
}))}
onDataStateChange={onDataStateChange}
onSelectionChange={onSelectionChange}
pageable={pagerSettings}
dataItemKey={DATA_ITEM_KEY}
selectedField={SELECTED_FIELD}
total={total}
selectable={{
enabled: true,
drag: false,
cell: false,
mode: 'multiple',
}}
sortable
expandField="expanded"
onExpandChange={onExpandChange}
detail={detail}
>
{children}
</DataclayKendoGrid>
)}
</Tooltip>
</>- We have set the `title` property on icons we want to display a tooltip
const CampaignActions = ({
deleteClick,
viewClick,
editClick,
downloadClick,
...props
}) => {
const {dataItem} = props;
return (
<CommandCell {...props}>
<Link
to={{
pathname: `/campaign/${dataItem._id}`,
state: { campaign: dataItem, fromCampaigns: true },
}}
>
<View title="View Campaign"/>
</Link>
<Edit title="Edit Campaign" onClick = {() => editClick(dataItem)} />
<Download title="Download Campaign Data" onClick = {() => downloadClick(dataItem)} />
<Delete title="Delete Campaign" onClick = {() => deleteClick(dataItem)}/>
</CommandCell>
)
}
- We have a filter function and have add a property to the elements we want to identify as anchor elements (`data-type="action"`)
export const Edit = (props) => {
return (
<PopupWrapper title={props.title} onClick={props.onClick} >
<Action data-type="action">
<FontAwesomeIcon className = "icon" icon ="fa-light fa-pen-to-square" isopen="true"/>
</Action>
</PopupWrapper>
)
} const filterElements = (element) => {
if (element.dataset.type === "action") {
return true;
}
return false;
};
<GridColumn
title="Created At"
field="_createdAt"
cell = {props => {
const { dataItem } = props;
const date = moment(dataItem._createdAt).format('MM.DD.YY / LT');
return (
<CustomGridCell
{...props}
tooltip={false}
cellContent={date}
/>
)
}}
columnMenu={DateRangeMenu}
headerClassName={
isColumnActive('_createdAt', dataState) ? 'active' : ''
}
/>Is there a way to hide this attribute from the tooltip context, since it's needed for the GridColumn, but is causing an issue with the tooltip?
1 Answer, 1 is accepted
Hello Abi,
The "title" attribute was added to the Column Menu element due to the following issue:
With the current implementation it is not possible to remove the "title" attribute with a property and the only option would be to find the elements after the Grid is rendered and remove them with pure JavaScript (within React.useEffect).
Nevertheless, I will contact the developers team to see if the "title" property can be replaced with "aria-label" or to render it conditionally.
Regards,
Konstantin Dikov
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!