Question

35

How do I use popover from Twitter Bootstrap to display an image?

rated 0 times [ 38] [ 3] / answers: 1 / hits: 126030 / 12 Years ago, sun, june 17, 2012, 12:00:00

The canonical example for Twitter Bootstrap's popover feature is sort of a tooltip on steroids with a title.

HTML:

<a href=# id=blob class=btn large primary rel=popover data-content=And here's some amazing content. It's very engaging. right? data-original-title=A title>hover for popover</a>

JS:

<script>

$(#blob).popover({offset: 10});

</script>

I'd like to use popover to display an image. Is this possible?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rociom

Add To Favorites

Follow

Total Points: 287

Total Questions: 88

Total Answers: 101

Location: Oman

Member since Wed, Nov 17, 2021

3 Years ago

rociom questions

1 Custom URL in Vite dev server (multi page app)

Mon, Sep 6, 21, 00:00, 3 Years ago

1 JavaScript dialogs alert(), confirm() and prompt() in cross origin iframe does not work any longer

Thu, Jul 22, 21, 00:00, 3 Years ago

1 How do I upload a custom emoji to my discord bot

Tue, Feb 2, 21, 00:00, 3 Years ago

1 Send multiple axios requests in a for loop in series (One after the other)

Mon, Nov 16, 20, 00:00, 4 Years ago

1 How to get require.context to work with Create React App with/withou Craco?

Sun, Jan 19, 20, 00:00, 4 Years ago

View All

answered 12 Years ago allanw · Accepted Answer

Very simple :)

<a href=# id=blob class=btn large primary rel=popover>hover for popover</a>



var img = '<img src=https://si0.twimg.com/a/1339639284/images/three_circles/twitter-bird-white-on-blue.png />';



$(#blob).popover({ title: 'Look! A bird!', content: img, html:true });

http://jsfiddle.net/weuWk/