I am using kendoreact tooltip to show  the error on hovering of cell in the grid. When i hover on the error, i wan to change the height, width, background-color & text color of the tooltip. Please help. i tried to customize using .k-tooltip class. But its not working.  Please help

Hi,

I have a problem with the Tooltip position issue.

If I move the pointer from outside of the chart to a a chart item, the tooltip position is correct

But if I try to hover on a chart item, after that I move the mouse to an item beside it, the position is incorrect now

I have a KendoReact grid that shows a custom cell to add tooltips.

My grid code: 

<Tooltip openDelay={100} position="bottom">
    <Grid
        data={process(teams.map((item) => ({ ...item, selected: item.uniqueIdentifier === gridSelection.uid })), gridState)}
          {...gridState}
          onDataStateChange={handleGridDataStateChange}
          onRowClick={handleRowClick}
          onRowDoubleClick={handleDoubleClick}
          sortable={true}
          pageable={true}
          selectedField="selected">
   <Column
      title={teamname}
      field="name" filter={'text'}
      cell={GridCellTooltip}
      columnMenu={ColumnMenu}
      headerCell={CustomHeaderCell}
   />

But when I filter the grid, the tooltip does not update and retains the value from the previous rendering:

My cell component - GridCellTooltip - is returning the field value in the title attribute:

return (
    <td title={props.dataItem[field]}>
      {props.dataItem[field]}
    </td>
  );

But I can see when I inspect it, that title is not being set and so seems to default to the previous tooltip value for that row.

There is nothing else custom going on and this is all client side sorting, filtering, etc.

Any idea what the issue might be?

Vuk5wf (forked) - StackBlitz

is it a bug?

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' : ''
                }
              />

Hi.

I have an application where I use the Scheduler and the Tooltip component to show detailed information in the tooltip about the events in the Scheduler. I have to show different information in the tooltip depending on if the event is an allDayEvent or not. I have created a very much simplified example of the application here:

https://stackblitz.com/edit/react-xdkry1?file=app%2Fmain.tsx

The issue is that if I double-click on the allDay items to open the edit dialog, it does not open. The edit dialog only comes up on the non-all-Day events. Can you please have a look at this scenario and let me know what I'm doing wrong and how I can make sure that the edit dialog comes up no matter on which event I click?

I already found out that if I leave out the item parameter in the SchedulerEditItem then it works. But I couldn't figure out what I'm doing wrong.

Thanks!

Greetings,

Bernd

I have a following data

{
    label: 'A',
    value: 10,
    id: 0
  },
  {
    label: 'B',
    value: 12,
    id: 1
  },
  {
    label: 'C',
    value: 4,
    id: 2
  }

When I set the tooltip visible to 'true' . I get the value on the tooltip but I am looking to display the label instead of value

 <ChartSeriesItem
            type="donut"
            data={data}
            categoryField="label"
            autoFit={true}
            field="value"

tooltip={{

          >

Is there a way to customize the format to display the label name?

Hello.

I have some problems with popover. I also saw the demo.

1. If I use the default position (top) and anchor, the element (popover) is displayed lower than anchor by the full height. Use positionMode fixed didn't help.

2. I also need to use appendTo. If position is top, collision does not work properly.

3. If I use position bottom, the popover appears correctly, but the collision doesn't work at all.

Is there an example somewhere of a complex use of popover with appnedTo, anchor and collision? Are there any special css/js settings required? Because we use popover in a rather complex html structure.

Thanks.

Hello, I would like to create my own icon component that includes a tooltip. I created a small sample project on stackblitz for this. Unfortunately, the icon and the tooltip don't work quite right in the example project, but that's not important for my question.

My goal would be for the two icon components to be displayed in a line next to each other by default. 

After executing, if I assign the style attribute <div style="display: inline-block"> to the div that wraps the span, it works the way I want it to. 

I'm assuming the tooltip behind the scenes creates this construct, which I can't directly access in the code via the <tooltip> tag. Is there a way to find out which CSS class one would need to access to enable the desired behavior.

I would be very happy about a solution proposal. Thanks in advance.

Hello, I'm currently working with the Gantt React Component and have come to a point where I can't find a solution for my problem. My goal would be that a popover appears on hover over one of the yellow marked elements, wich contains two links to other websites. I would have to pass a key or an id to the link, which I get from the element the mouse is hovering over, based on which a specific article appears on the page called up. Unfortunately I couldn't find anything comparable in the documentation. 

I would be very happy about suggestions for a solution. Thanks!