CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
user2635652
user2635652

Reputation: 73

Visualizing popup with bootstrap

i'm using bootstrap and i'm trying the javascript which should visualize a popup when you click on a certain object, that in my case is the patially hidden text. Here's my code:

<html>
<head>
        <link href="bootstrap.min.css" rel="stylesheet">
        <link href="bootstrap.min.js" rel="stylesheet">
        <script>
$('#text').popover()
</script>
</head>



<body>
<a id="text" href="#" class="btn btn-link" data-content='I want to visualize this when i click on it !' data-placement="bottom">I see this </a>
</body>
</html>

When i click on the visualized text (which is "I see it") i doesn't do anything. Obviously my entire code is more than this, but actually this script doesn't work in a simple HTML like this one.

Upvotes: 2

Views: 149

Answers (3)

Astuanax
Astuanax

Reputation: 667

With jquery it is better to wait until the dom is ready. It is also not clear which bootstrap version you are using, but I am assuming version 3.

you can try the code below, or have a look at the example: http://jsfiddle.net/astuanax/s96Ag/

<html>
<head>
    <!-- Load jquery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <!-- Load bootstrap from cdn, no need to load popover when loading the full bs library -->  
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">
    </script>
</head>
<body>


    <a id="text" href="#" class="btn btn-link" data-content='I want to visualize this when i click on it !' data-placement="bottom">I see this </a>

    <script type="text/javascript">
    /* Wait until the DOM is ready to call the popover function */
    $().ready(function(){
        $('#text').popover()
    });
    </script>
</body></html>

Upvotes: 3

user2635652
user2635652

Reputation: 73

i modified as you told me. Here's the complete code:

<html>
<head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
        <link href="bootstrap.min.css" rel="stylesheet">
        <script src="bootstrap.min.js"></script>


</head>
<script>
$('#text').popover()
</script>



<body>
<a id="text" href="#" class="btn btn-link" data-content='I want to visualize this when i click on it !' data-placement="bottom">I see this </a>

</body>
</html>

Now it shows me the following error: TypeError: $(...).popover is not a function and $('#text').popover()

So i tried to solve this adding what it asks and this is the new code:

<html>
<head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
        <link href="bootstrap.min.css" rel="stylesheet">
        <script src="bootstrap.min.js"></script>
        <script src="bootstrap-tooltip.js"></script>
        <script src="bootstrap-popover.js"></script>


</head>
<script>
$('#text').popover()
</script>



<body>
<a id="text" href="#" class="btn btn-link" data-content='I want to visualize this when i click on it !' data-placement="bottom">I see this </a>

</body>
</html>

No errors now, but it still doesn't work.

New try:

<html>
<head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <link href="bootstrap.min.css" rel="stylesheet">
        <script src="bootstrap.min.js"></script>
        <script src="bootstrap-tooltip.js"></script>
        <script src="bootstrap-popover.js"></script>


</head>
<script>
$('#text').popover()
</script>



<body>
<a id="text" href="#" class="btn btn-link" data-content='I want to visualize this when i click on it !' data-placement="bottom">I see this </a>

</body>
</html>

Upvotes: 1

mmjmanders
mmjmanders

Reputation: 1553

The javascript is loaded as a stylesheet: replace <link href="bootstrap.min.js" rel="stylesheet"> with <script src="bootstrap.min.js"></script> and place this preferrably right before the </body> tag

Upvotes: 4

Related Questions