0
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.

Pevara
  • 14,242
  • 1
  • 34
  • 47
Cosmic Badal
  • 13
  • 1
  • 8

1 Answers1

3

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>
Brandon Anzaldi
  • 6,884
  • 3
  • 36
  • 55
  • 1
    you beat me to it, here is the demo I was working on: http://www.bootply.com/XpJcxYPsHN – Pevara Apr 18 '16 at 20:45
  • Looks like you almost beat _me_ to it though ;) You were close to done from what I can tell :) Nice demo as well. – Brandon Anzaldi Apr 18 '16 at 20:55
  • How can I do this using vanilla CSS/JS? – code Oct 17 '18 at 10:32
  • If you're looking for a vanilla JS library, there's Tippy: https://atomiks.github.io/tippyjs/ Otherwise, you can check out SO answers like this one: https://stackoverflow.com/questions/18359193/plain-javascript-tooltip https://stackoverflow.com/questions/7117073/how-to-add-a-tooltip-to-a-div – Brandon Anzaldi Oct 17 '18 at 15:18