CODEWITHSUNDEEP
html
Cosmic Badal
Cosmic Badal

Reputation: 13

Style the part of data-tooltip text into bold

data-tooltip="
                 Title Here
                 1. Bullet one 
                 2. Bullet two
                 3. Bullet three "

I need the "Title Here" to be bold and rest of them to be align in new line.

Upvotes: 0

Views: 12074

Answers (1)

Brandon Anzaldi
Brandon Anzaldi

Reputation: 7270

Assuming you're using Bootstrap tooltips, which is the best I can infer from your post, you can enable html in your tooltip. (Remember to include more specifics in the future please!)

<div data-tooltip="<strong>Title Here</strong>
                     <ol>
                       <li>Bullet one</li>
                       <li>Bullet two</li>
                       <li>Bullet three</li>
                     </ol>" data-html="true">

Also, I'd recommend keeping HTML attributes on a single line if possible, both for convention, and to prevent any unintentional newlines and such. If you need newlines in the tooltips, use <br> elements.

(function () {
  $('[data-toggle="tooltip"]').tooltip();
}());
.tooltip-div {
  background-color: #F00;
  width: 100px;
  height: 100px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="tooltip-div" data-toggle="tooltip" title="<strong>Title Here</strong><ol><li>Bullet one</li><li>Bullet two</li><li>Bullet three</li></ol>" data-html="true" data-placement="bottom">
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

Upvotes: 3

Related Questions