Search code examples
htmlcssbootstrap-4popover

How to add details to tooltip other than title

We normally use tooltip like this 

<button class="btn btn-success" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip On Right</button>

Here we are adding the details in the title part

But I am having lots of details that need to add in the title elements like Profile picture, Designation, First name, Last Name, etc...

So, I am not able to pass it in the title

Is there any other option to fix this?

Also currently, this tooltip is coming when I am hovering it... I need it to show once I click it

Solution

  • As in comments suggest, you should use Popovers instead of tooltip. 

    <link href="https://getbootstrap.com/docs/4.4/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/docs/4.4/dist/js/bootstrap.bundle.min.js"></script>
<script>
  $(function() {
    $('[data-toggle="popover"]').popover()
  })
</script>
<h1>Popover Example</h1>
<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Popover title" data-content="Popove`enter code here`r content. example content for popover">Click to toggle popover</button>

    Also you can HTML option to add more flexible content.

    Reference: Bootstrap Popovers Docs