Loading

Twitter Bootstrap Popover

Submitted by: 
Language: 
Visitors have accessed this post 4123 times.


Hi guys,

I have here a Popover from twitter bootstrap. Add small overlays of content, like those on the iPad, to any element for housing secondary information. Try this code to your future project. Hope you like this code, for more question email me at jkevlorayna@gmail.com or visit twitter bootstrap website.

Thank you.

Sample code:

  1. <?php include('header.php'); ?>
  2. <div class="row-fluid">
  3. <div class="span12">
  4. <div class="container">
  5. <script type="text/javascript">
  6. $(document).ready(function(){
  7.  
  8. $('#first').popover('show')
  9. $('#first').popover('hide')
  10. });
  11. </script>
  12. <script type="text/javascript">
  13. $(document).ready(function(){
  14.  
  15. $('#second').popover('show')
  16. $('#second').popover('hide')
  17. });
  18. </script>
  19. <script type="text/javascript">
  20. $(document).ready(function(){
  21.  
  22. $('#third').popover('show')
  23. $('#third').popover('hide')
  24. });
  25. </script>
  26. <script type="text/javascript">
  27. $(document).ready(function(){
  28.  
  29. $('#fourth').popover('show')
  30. $('#fourth').popover('hide')
  31. });
  32. </script>
  33. <a id="first" class="btn btn-large" data-placement="top" data-content="content here" title="" data-toggle="popover" href="#" data-original-title="A Title">Click to toggle popover top</a> <br>
  34. <br>
  35. <a id="second" class="btn btn-large" data-placement="left" data-content="content here" title="" data-toggle="popover" href="#" data-original-title="A Title">Click to toggle popover left</a> <br>
  36. <br>
  37. <a id="third" class="btn btn-large" data-placement="right" data-content="content here" title="" data-toggle="popover" href="#" data-original-title="A Title">Click to toggle popover Right</a> <br>
  38. <br>
  39. <a id="fourth" class="btn btn-large" data-placement="bottom" data-content="content here" title="" data-toggle="popover" href="#" data-original-title="A Title">Click to toggle popover bottom</a>
  40. </center>
  41. </div>
  42. </body>
  43. </html>



Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Comments

Nice..!

Add new comment

(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.
To prevent automated spam submissions leave this field empty.

Filtered HTML

  • You may insert videos with [video:URL]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.