Hi -
I'm using some great code - but, no matter what I do the content text will
not display. I've checked my paths, inserted css to ensure the text is
black, and added html:true to the script to no avail.
In firebug when I hover over <div class="popTitle"> bla bla bla</div> this
is the code triggered by Bootstrap:
<div class="popover fade right in" style="top: 379px; left:52px;
display:block;">
Has anyone else experienced this? Any help is appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Popover Example with title and content
option</title>
<!-- popover source code:
www.thoughtdelimited.org/thoughts/post.cfm/simple-technique-for-creating-multiple-twitter-bootstrap-popovers
-->
<link href="css/bootstrap.css" rel="stylesheet">
<!--<link href="css/bootstrap-responsive.css" rel="stylesheet">-->
<!--<link href="css/global.css" rel="stylesheet">-->
<style>
.popSourceBlock {display:none;}
.popContent {color: #000000;}
</style>
</head>
<body>
<!-- CONTENT NAVBAR -->
<div class="well" style="margin-top:400px;">
<i id="pop1" class="icon-question-sign pop"></i>
<div id="pop1_content" class="popSourceBlock">
<div class="popTitle">
Title 1
</div>
<div class="popContent">
<p>This is the content for the <strong>first</strong>
popover.</p>
</div>
</div>
<i id="pop2" class="icon-question-sign pop"></i>
<div id="pop2_content" class="popSourceBlock">
<div class="popTitle">
Title 2
</div>
<div class="popContent">
<p>This is the content for the <strong>second</strong>
popover.</p>
</div>
</div>
</div><!-- .well -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<!-- this assigns functions that return markup to title and content
properties -->
<script>
$(".pop").each(function() {
var $pElem= $(this);
$pElem.popover(
{
title: getPopTitle($pElem.attr("id")),
content: getPopContent($pElem.attr("id")),
html: true
}
);
});
function getPopTitle(target) {
return $("#" + target + "_content > div.popTitle").html();
};
function getPopContent(target) {
return $("#" + target + "_content > div.popContent").html();
};
</script>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"twitter-bootstrap" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.
