CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Behseini
Behseini

Reputation: 6330

Issue on Displaying Bootstrap Popover On Small Screens

Can you please take a look at this demo and let me know why I am not able to position the popover on the bottom or top of the hyperlink?

as you can see I already added

placement : 'auto right'

but this is not working too!

Thanks

Upvotes: 0

Views: 715

Answers (1)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

As stated in their docs for placement option:

Type: String|function

Default: right

Description: How to position the popover - top | bottom | left | right | auto. When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.

when you specify auto left as placement option, it will display to the left whenever possible else it will display to the right i.e. they are targeting on opposite direction.

So if you want to make it appear on top you need to specify either top or bottom in placement option along with auto.

Ex 

placement:'auto top'

Alternatively, you can specify it in html5 data-placement attribute for element

Ex

<a href="#" class="" data-toggle="popover" data-placement="top" title="Move to Down On small" data-content="" role="button">Smart PopOver</a>

DEMO

Upvotes: 1

Related Questions