0

En este proyecto: https://stackblitz.com/edit/angular-ivy-byvfjy?file=src/app/app.component.html

Cuando quieres ver las empresas que han sido adjudicatarias de un concurso

plicas

Quiero que al poner el raton encima del boton "Adjudicada" el tooltip muestre las empresas una debajo de otra

tooltip

Pero no se que debo añadir en el contenido

En la plantilla tengo esto para el boton

<button *ngIf="element.estaAdjudicada==true" mat-raised-button color="accent"
          [matTooltip]="mostrarAdjudicatario(element)">Adjudicada</button>
        <button *ngIf="element.estaAdjudicada==undefined" mat-raised-button 
color="primary">Ver/Editar</button>

y en la funcion mostrarAdjudicatario() esto

mostrarAdjudicatario(oferta: Oferta): string {
var licitadorEnSolitarioId: number = oferta.licitacionesEnSolitario.find(o => o.adjudicado == true)?.licitadorId;
var uteId: number = oferta.licitacionesEnUte.find(o => o.adjudicado == true)?.uteId;
var licitadoresUteIds: string[];

if (licitadorEnSolitarioId != undefined) {
  return this.licitadores.find(l => l.id == licitadorEnSolitarioId).nombre;
}
else {
  licitadoresUteIds = this.utes.find(u => u.id == uteId).licitadoresId.split(",");

  var nombreUtes: string = ""

  for (let licitadorId of licitadoresUteIds) {
    nombreUtes += this.licitadores.find(l => l.id == +licitadorId).nombre + "&#13;"
  }
  return nombreUtes;
}

}

Pero no se que caracter añadir a nombreUtes para que se traduzca en un retorno de linea

Alguna idea por favor?

Un saludo

1 respuesta 1

1

matTooltip acepta un input matTooltipClass para añadirle clases al tooltip para personalizar su formato. Haciendo uso de este input puedes conseguir las múltiples líneas de la siguiente manera.

Asigna una clase al tootip (en este caso la he llamado multi-line-tooltip)

<button 
  *ngIf="element.estaAdjudicada==true" 
  mat-raised-button 
  color="accent"              
  [matTooltip]="mostrarAdjudicatario(element)"
  matTooltipClass="multi-line-tooltip"
>Adjudicada</button>

Añade esa clase en el archivo de estilos globales (styles.css) con la propiedad white-space: pre-line

// es necesario usar .mat-tooltip delate por temas de especificidad
.mat-tooltip.multi-line-tooltip { 
  white-space: pre-line;
}

Y por último inserta el salto de línea(\n) en la parte correspondiente del texto.

nombreUtes += this.licitadores.find(l => l.id == +licitadorId).nombre + "\n"

un saludo

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.