bootstrap-popover-on-hover/README.md

Responsive Popover on hover built with Bootstrap 5. Examples of custom html, directions, images & more.

Responsive Popover on hover built with Bootstrap 5. Examples of custom html, directions, images & more.

Check out [Bootstrap Height Documentation](https://mdbootstrap.com/docs/standard/extended/popover-on-hover/) for detailed instructions & even more examples.

## Basic example

![Bootstrap 5 Overlay](/assets/basic.png)

```html
<img
  src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
  class="img-thumbnail"
  alt="Hollywood Sign on The Hill"
  data-mdb-toggle="popover" 
  title="Popover title"
  data-mdb-content="And here's some amazing content. It's very engaging. Right?"
  data-mdb-trigger="hover" 
/>
```

## How to use?

1. Download MDB 5 - free UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)

## More examples

[Bootstrap Popover directions:
![Bootstrap 5 Popover on hover](/assets/directions.png)](https://mdbootstrap.com/docs/standard/extended/popover-on-hover#section-four-directions)

[Bootstrap Popover with custom html:
![Bootstrap 5 Popover on hover](/assets/html.png)](https://mdbootstrap.com/docs/standard/extended/popover-on-hover#section-custom-html-on-hover)

[Bootstrap Popover with image:
![Bootstrap 5 Popover on hover](/assets/image.png)](https://mdbootstrap.com/docs/standard/extended/popover-on-hover#section-image-on-hover)

___

## More extended Bootstrap documentation

<ul>
<li><a href="https://mdbootstrap.com/docs/standard/components/buttons/">Bootstrap buttons</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/components/button-group/">Bootstrap button group</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/methods/ripple/">Bootstrap ripple</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/content-styles/images/">Bootstrap images</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/components/list-group/">Bootstrap List group</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/components/popconfirm/">Bootstrap popconfirm</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/components/tooltips/">Bootstrap tooltips</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/layout/horizontal-alignment/">Bootstrap horizontal Alignment</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/layout/vertical-alignment/">Bootstrap vertical Alignment</a></li>
</ul>