CODEWITHSUNDEEP
cssangularjstwitter-bootstrap
Prashanth
Prashanth

Reputation: 107

angular bootstrap popover to show hover data of a bind object

I have my html as below with angular directives which is a hyper link along with display text on div using bo-bind with data coming from patient object.

<a class='bold cursor-pointer hyperlink patient-name first-level-child' bo-href='patient.link'>
        <div class = "patient-name handle-long-text" bo-bind = 'patient.personName'></div>
</a>

I need to make my hyper link to show some patient details on hover based on patient object (ex Name : xyz Phone : 3535353 Address : xxxxx)

I am planning to use UI.bootstrap popover however what I found was popover tag will only show text and I am unable to put some html like on popover tag, Is there any way or if there is better way to get the hover to work with my dynamic bind object patient?.

Upvotes: 0

Views: 2596

Answers (1)

Ted
Ted

Reputation: 14927

Sure thing, in fact you can include HTML in a bootstrap popover. Take a look at this demo bootply, using this markup:

  <button type="button" 
        class="btn btn-lg btn-danger" 
        data-toggle="popover" 
        data-trigger="hover"
        title="Popover title"
        data-html="true"
        data-content="Name : xyz<br/>Phone : 3535353 <br/>Address : xxxxx">
      Click to toggle popover
  </button>

The important bits are:

data-trigger="hover" Sets it to show on hover

data-html="true" Sets it to take HTML in the data-content attribute, instead of text, so that

data-content="Name : xyz<br/>..." can be filled with HTML code instead of plain text

Upvotes: 2

Related Questions