markdown BS Popover与JS

Posted 2021-05-06

### Bootstrap
* Add a `rel` to an `<a>` tag: `<a rel="popover"`
* Along with a `data-img` attribute: `<a rel="popover" data-img="contains the link to the image"`

---

### JQUERY
* Add the following jQuery to the selected anchor elements:

```javascript
$(function() {
  $('a[rel=popover]').popover ({
    html: true,
    trigger: 'hover', //View the image on hover
    placement: 'right', //Where should the popover occur
    content: function() {
      return '<img src="' + $(this).data('img') + '" />'; //how the image is shown
    }
  })
})
```

---

### CSS
* If the image is larger than the popver container, add the following in your css file:
` .popover {max-width: 100%; }`

---

### Resources
* [link1](http://embed.plnkr.co/nhlFPz//placehold.it/400x200)