Click here to Skip to main content
15,922,015 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have two icons with tooltips applied to them. I want different styling on these 2 tooltips like different height and width on them.But same styling is applied on both of them .

How can I give different styling to them.

Tried with giving different classnames to each tooltip

What I have tried:

https://jsfiddle.net/Lgjosnf4/
HTML
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<i id="info" class="ion-information-circled"  data-toggle="tooltip" data-html="true" data-container="body" data-placement="bottom" title="icon1"></i>'
<i class="ion-folder" id="fopen" data-toggle="tooltip" data-html="true" data-container="body" data-placement="bottom" title="icon2" ></i>


CSS
.tooltip-inner { 
  text-align: left;
  max-width: 100% !important;
  height: 35px;
  width:280px;
  } 

JavaScript
$(document).ready(function(){
           $('[data-toggle="tooltip"]').tooltip();
         });
Posted
Updated 15-Sep-20 5:11am

1 solution

You'll need to specify a different template for each tooltip, as described in the documentation:
template - Base HTML to use when creating the tooltip.
That will let you add a custom CSS class to the tooltip, which you can target in your stylesheet.

If you set the template via the data- attributes, you will need to HTML-encode it.

Eg:
HTML
<i .. data-toggle="tooltip" data-template='&lt;div class="tooltip tooltip-xl" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;&lt;/div&gt;'>
CSS
.tooltip-xl .tooltip-inner {
    text-align: left;
    max-width: 100% !important;
    height: 35px;
    width:280px;
}
Demo[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900