Tooltip

Tooltip

Posted by: bmakhlin on 26 October 2018, 6:07 am EST

• 

  bmakhlin

  • Post Options:
  • Link
    Copy

  Posted 26 October 2018, 6:07 am EST

  Hi,
  
  I need to display tooltip when user mouse over column headers and cells. Can I use ngbTooltip like below or I have to use Tooltip.show function? I could not get ngbTooltip working in Flex grid. Do you have an example for using ngbTooltip with Flex grid?

  
          <ng-template #tipContent>
              <div>
                  <div>name1: value1</div>
                  <div>name2: value2</div>
              </div>
          </ng-template>
  
  <ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" let-cell="cell" let-row ="row" let-item="item">
             <div [ngbTooltip]="tipContent">header</div>
          </ng-template>
  
  

  thank you

• 

  bmakhlin

  • Post Options:
  • Link
    Copy

  Posted 26 October 2018, 8:43 am EST

  I was able to get ngbTooltip to work in the above example

  I have another question. I am adding column header dynamically using code below and ngbTooltip is not showing up. Please advise what am I missing.

  
          flexGrid.formatItem.addHandler((s, e) => {
              const that = this;
  
              if (e.panel.cellType === wjcGrid.CellType.ColumnHeader) {
                  if (e.row === 0 && e.col > 0) {
                      e.cell.innerHTML = '<div class="float-left" ngbTooltip="columnHeaderTooltip2" container="body">' + that.flexGrid.columnHeaders.columns[e.col].header + '</div>';
                  }
              }
          });
  
  

  thank you

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 28 October 2018, 7:29 pm EST

  Hi,

  The issue here is when we set innerHTML, angular doesn’t compile ngbTooltip directive and hence tool-tip doesn’t show up.
  
  If you want to attach dynamic tooltip, you may check out Wijmo’s tooltip, please refer to the following sample:
  
  https://stackblitz.com/edit/angular-u1sxqr?file=app%2Fapp.component.ts

  ~Sharad

• 

  bmakhlin

  • Post Options:
  • Link
    Copy

  Posted 2 November 2018, 8:51 am EST

  I implemented your solution and was able to display tool tip on column header. We are using ngb tooltip in other places of the application. So we would like all tool tips look alike. Other tool tips are positioned bottom. I could not figure out how to position wijmo tool tip bottom and style it so it has the same look as ngb tooltip. Can you please advise how to style wijmo tool tip so it is positioned bottom and it matches ngb tooltip style?

  thank you very much

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 5 November 2018, 3:10 pm EST

  Hi,

  We are sorry. Currently, Wijmo doesn’t support customizing the tooltip position. However, we have created a feature request for the same with internal tracking id: 352271.
  
  For styling the tooltip you may use wj-tooltip CSS class and format the tooltip as required.
  
  .wj-tooltip{
  
  background-color: black;
  
  color: white;
  
  }

  Regards
  
  Sharad

• 

  maulikhdave

  • Post Options:
  • Link
    Copy

  Posted 8 August 2019, 9:30 pm EST

  Hello
  
  in my code, I use new wijmo.Tooltip(). in angular js.
  
  I m using tooltip multi places with multiple components.
  
  but for one component I want to change its style like the color as I can see in the above
  
  post but I want to make that for a specific control.
  
  not for general level.
  
  please let me know how I can do that?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 11 August 2019, 5:08 pm EST

  Hi,

  From Wijmo version 5.20183.568, a new property “cssClass” is added on the tooltip to allow custom styles for different components. Please refer to the following code snippet:

  let toolTip = new wijmo.Tooltip();
  // add custom class name for specialized styles
  toolTip.cssClass = "my-special-tooltip";
  // style tooltip using CSS
  .wj-tooltip.my-sprecial-tooltip{
    background-color: #1c4458;
    color: white;
  }
  

  ~sharad

• 

  meera.wisniewski

  • Post Options:
  • Link
    Copy

  Posted 24 January 2021, 11:08 am EST

  I need to dynamically apply a css class as per the rows property. I have a girdValidation which sets the tooltip with error. I have a css class that adds a danger icon before the error text. I am using the GetError method to set the validation. We have a need where we need to set a warning and error. Right now by default the css class for .wj-tooltip.wj-error-tip:before. How do i change the content property of the css class to set the correct icon to display depending if the row has error or warning.
  
  I have tried setting the cssClass but it does not seem to change. Can u please let me know how do I achieve this?

  this.toolTip.cssClass = ‘wj-tooltip.wj-error-tip-warning:before’;
  
  if (rowValue.hasWarning) {
  
  addClass(cell, this.toolTip.cssClass);
  
  }
  
  .wj-tooltip.wj-error-tip-warning:before {
  
  color: #FFB400 !important;
  
  position: relative;
  
  font-family: “bento-icons”;
  
  font-style: normal;
  
  font-weight: 400;
  
  -webkit-font-smoothing: antialiased;
  
  speak: none;
  
  line-height: 0;
  
  top: 2px;
  
  font-size: 17px;
  
  height: 14px;
  
  width: 1.3em;
  
  content: “\e6fc”;
  
  border: none;
  
  display: inline-block;
  
  }
  
  .wj-tooltip.wj-error-tip:before {
  
  color: #dc0a0a;
  
  position: relative;
  
  font-family: “bento-icons”;
  
  font-style: normal;
  
  font-weight: 400;
  
  -webkit-font-smoothing: antialiased;
  
  speak: none;
  
  line-height: 0;
  
  top: 2px;
  
  font-size: 17px;
  
  height: 14px;
  
  width: 1.3em;
  
  content: “”;
  
  border: none;
  
  display: inline-block;
  
  }

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 26 January 2021, 5:17 pm EST

  Hi,

  We have added a response to your original query on the following thread:
  
  https://www.grapecity.com/forums/wijmo/cellvalidation-tooltip-for
  
  Please refer to the same.

  Regards