override tooltip width in portal

[amaradiswamy]

Hi All,

I am using below to add tooltip to an icon

<i class="fa fa-info-circle fa-2x" style="width:100%" tooltips tooltip-template="Please contact hepdesk for any urgent issues !!"></i>

which is working fine, but when i have large content it is causing problem, how to override width of the tooltip.

Regards,

Swamy

[chirag_bagdai]

It's part of bootstrap tooltip plugin only so you may find related content in stack overflow or in GitHub.

Please find below links which can be helpful :

Tooltip-inner width issue · Issue #13418 · twbs/bootstrap · GitHub

jquery - Displaying long text in Bootstrap tooltip - Stack Overflow

[amaradiswamy]

Thank you!!

I tried but looks like styling is not applied.

widget script:

HTML:

<div class="panel panel-default">
   <div class="panel-heading">
           <h4 class="panel-title">
               ${My Tickets}
       </h4>     
           <div class="sorting-icon-div-desktop">
               <div class="dropdown sort-by-dropdown">
                       <div class="dropdown-toggle sort-by-button" type="button" data-toggle="dropdown">Sort by
                               <span class="caret"></span></div>
                       <!--   sorting options changed based on navigation item selected - Dipesh-->
                       <ul class="dropdown-menu" id="dropdown-list">
                               <li class="highlight"><a ng-click="changeSort('name')">Item</a></li>
                               <li ><a ng-click="changeSort('number')">Number</a></li>                         
                       </ul>
                   </div></div>         
   </div>
   <div class="panel-body" >
       <div class="container">
   <table width="30%">
       <tr><th>item</th><th>Number</th></tr>
       <tr><td>Apple ID</td><td>Apple ID</td></tr>
       <tr ng-repeat="item in data.items | orderBy:orderField:flag" >
       <td style="border-bottom:1pt solid black;" id= "mytext"><a href="/sp?id=ticket&table=sc_request&sys_id={{item.reqsys}}"   rel="tooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum ac felis id commodo. Etiam mauris purus, fringilla id tempus in, mollis vel orci. Duis ultricies at erat eget iaculis.">{{item.name}}</a><small>{{item.updated}}</small></td>
       <td style="border-bottom:1pt solid black;">{{item.number}}</td>     

       </tr>
       <hr />
   </table>
       </div>
</div>
   <div class="panel-footer" >
       <h4 class="panel-title"> ${First 5 of {{data.items.length}} }
           <a class="" style="float:right;margin-top:-10px" href="javascript:void(0)" ng-click="c.seeAll()">${View all}</a>
       </h4>
   </div>
</div>

Client controller:

function($scope,spUtil) {
   /* widget controller */
   var c = this;
 $("a").tooltip({
         'selector': '',
       'placement': 'top',
       'container':'body'
   });

   //$('#mytext').popover();
       //$('[data-toggle="tooltip"]').tooltip();     


   $('.auto-tooltip').tooltip();
   $scope.orderField = 'number';
   $scope.flag = true;
   $scope.changeSort = function(field)
   {
   $scope.orderField = field;
   if($scope.flag == true)
   $scope.flag = false;
   else
   $scope.flag = true;
   }

     spUtil.recordWatch($scope, "sc_req_item", "", function(name, data) {
             spUtil.update($scope);
   });
}

Regards

Swamy

[chirag_bagdai]

ng-repeat(line#21 in HTML) didn't worked in my case because the server script was missing so I tried <a> tooltip element outside of ng-repeat and checked.

and for me it's   working fine. Please find below screenshot:

Please check if you have included any external plugin.

[amaradiswamy]

No external plugins included.

Could you please share me the working script so i can compare.

[chirag_bagdai]

Check with new widget -

HTML:

<a href="/sp?id=ticket&table=sc_request&sys_id={{item.reqsys}}"   rel="tooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum ac felis id commodo. Etiam mauris purus, fringilla id tempus in, mollis vel orci. Duis ultricies at erat eget iaculis.">Test</a>

Client Controller :

function($scope,spUtil) {

  /* widget controller */

  var c = this;

  $("a").tooltip({

  'selector': '',

  'placement': 'top',

  'container':'body'

  });

  //$('#mytext').popover();

  //$('[data-toggle="tooltip"]').tooltip();

  $('.auto-tooltip').tooltip();

}