Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How To Extract Bootstrap's Popover Functionality?

Tags:

javascript

twitter-bootstrap

I have a non-bootstrap project which requires popover functionality.

I'd like to use bootstrap's popovers, but don't want to include all of bootstrap, since I'll only be using this one feature. I'd also be open to suggestions for a different standalone popover widget.

Bootstrap's popover are described here, with examples:

http://getbootstrap.com/javascript/#popovers

My questions are:

  1. Which bootstrap CSS definitions will I need to extract from the source?
  2. Since the bootstrap customizer is not yet available, do I just need to use the file tooltip.js, or are there some other base js files I'll need to include?

Thanks!

like image 875
Jonah Avatar asked Aug 07 '13 02:08

Jonah

People also ask

How do I enable popovers in bootstrap?

To create a popover, add the data-toggle="popover" attribute to an element. Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.

How do I show popover on hover?

To make the image on hover in popover just insert an image as an HTML element to the data-mdb-content and set the data-mdb-html to true .

How do I know if my popover is visible or not?

You can also check using a condition $('#anElement'). next(). hasClass('popover') which will return true if the popover is on.

Which attribute is used to store the popover content?

The data-toggle attribute defines the Popover, the title attribute defines the Tile for the Popover and the data-content attribute is used to store the content to be displayed in the respective Popover.

1 Answers

  1. Here's a fiddle with the relevant snippets of Bootstrap. The relevant classes are:

    .popover
.popover.top
.popover.right
.popover.bottom
.popover.left 
.popover-title 
.popover-content 
.popover .arrow
.popover .arrow:after
.popover .arrow
.popover .arrow:after
.popover.top .arrow
.popover.top .arrow:after
.popover.right .arrow
.popover.right .arrow:after
.popover.bottom .arrow
.popover.bottom .arrow:after
.popover.left .arrow
.popover.left .arrow:after

  2. Yes, since popover extends tooltip. And you'll need jQuery if you're not already using it.

I've also heard some nice things about qTip2.

like image 160
sgbj Avatar answered Sep 28 '22 06:09

sgbj
Sign in to Comment

Related questions

pause function until enter key is pressed javascript
Javascript. Convert MD5 hash into an integer
dataTables jquery - how to add sorting image/icon?
How to replace http with https via javascript
Drag & Drop with nested target in HTML5
Is Meteor.js stable enough for production?
Regex only capturing last instance of capture group in match
How do I subset a 2-dimensional array in Javascript?
Check variable true with if statement
How can I set a phase offset for an OscillatorNode in the Web Audio API?
Converting Datetime C# type to Date javascript in asp.net mvc razor application
getElementsByTagName("table") - getting td on curious way
How do I print $rootScope variable?
overwrite $location pushState history AngularJS
jQuery fade in page load
Bootstrap .popover('show'), .popover('hide') not working. Binding it to click works
Read contents of a file and print it to console using javascript
Tell ember.js to use different key for its model's "id"
how to get js POST in asp.net webform?
Difference between textAlign Left and Start on a canvas 2d context?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!