HTML - How to Show Tooltip Only When Ellipsis Is Activated

show Tooltip only when the ellipsis is active

Overflow of an element can be detected in JavaScript with this helper, using Angular ElementRef and a formula from this answer:

function isTextTruncated(element: ElementRef): boolean {
  const e = element.nativeElement;
  return e.scrollWidth > e.clientWidth;
}

Then, in your component, use it referencing the element with a "@ViewChild" property:

  @ViewChild('hospitalName') hospitalNameElement: ElementRef;

  isHospitalNameTruncated(): boolean {
    return isTextTruncated(this.hospitalNameElement);
  }

Finally, in the template, add the identifier #hospitalName and call isHospitalNameTruncated() to customize the tooltip text:

<td mat-cell [attr.id]="hospital.organizational_id + '_hospitalname'"
    *matCellDef="let hospital">
  <div id="hospital_name" #hospitalName class="truncate"
       [matTooltip]="isHospitalNameTruncated() ? hospital.organization_name : null ">
    {{hospital.organization_name}}
  </div>
</td>

How to create a tooltip only when ellipsis is active ? I want the solution only in CSS

Use title attribute not hover style.

.truncate {
  max-width: 160px;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<span class="truncate" title="HERE is my sample text HERE is my sample text"> 
    HERE is my sample text HERE is my sample text
</span>

How to activate tooltip when ellipsis is activated using a directive in angular 5?

You can create this directive:

import { AfterViewInit, Directive, ElementRef, EventEmitter, Output } from 

'@angular/core';

@Directive({
  selector: '[isEllipsisActive]'
})
export class IsEllipsisActiveDirective implements AfterViewInit {

  constructor(private elementRef: ElementRef) {}

  ngAfterViewInit(): void {
    setTimeout(() => {
      const element = this.elementRef.nativeElement;
      if(element.offsetWidth < element.scrollWidth){
        element.title = element.innerHTML;
      }
    }, 500);
  }
}

take a look on this https://stackblitz.com/edit/angular-qjmg7m?file=src%2Fapp%2Fis-ellipsis-active.directive.ts

React show Material-UI Tooltip only for text that has ellipsis

To go off of @benjamin.keen answer. Here is a standalone functional component which is just an extension of his answer using hooks to perform the comparison functions.

import React, { useRef, useEffect, useState } from 'react';
import Tooltip from '@material-ui/core/Tooltip';
const OverflowTip = props => {
  // Create Ref
  const textElementRef = useRef();

  const compareSize = () => {
    const compare =
      textElementRef.current.scrollWidth > textElementRef.current.clientWidth;
    console.log('compare: ', compare);
    setHover(compare);
  };

  // compare once and add resize listener on "componentDidMount"
  useEffect(() => {
    compareSize();
    window.addEventListener('resize', compareSize);
  }, []);

  // remove resize listener again on "componentWillUnmount"
  useEffect(() => () => {
    window.removeEventListener('resize', compareSize);
  }, []);

  // Define state and function to update the value
  const [hoverStatus, setHover] = useState(false);

  return (
    <Tooltip
      title={props.value}
      interactive
      disableHoverListener={!hoverStatus}
      style={{fontSize: '2em'}}
    >
      <div
        ref={textElementRef}
        style={{
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis'
        }}
      >
        {props.someLongText}
      </div>
    </Tooltip>
  );
};

export default OverflowTip;

---

Related Topics