Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Mar 2016
    Posts
    2
    Member #
    53610

    Bootstrap Glyphicon tooltip styling help

    Hi. Ive got a tooltip set up on a glyphicon but want to style it. background etc in css. Im having trouble doing this. I just cant seem to affect the tooltip no matter what I do. Any help/advice would be greatly appreciated


    Im kind of a newbie to css and web development in general, but I dont think Im too far away

    My html:

    HTML Code:
    <!DOCTYPE html>
    <html>
      <head>
    <link rel="stylesheet" type="text/css" href="tooltip.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      </head>
    
    
    
      <body>
        <div class="container">
          <h2>Glyphicon Examples</h2>
             
          <p>Help icon as a link:
            <a href="#" class="test" data-toggle="tooltip" data-original-title="my text">
    
              <span class="glyphicon glyphicon-question-sign"></span>
    
            </a>
          </p>
    
        </div>
    <script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();   
    });
    </script>
    
        
      </body>
    </html>

    Im trying css I found in tutorials

    .
    Code:
    <style>
      /* Tooltip */
      .test + .tooltip > .tooltip-inner {
          background-color: #0000FF; 
          color: #FFFFFF; 
          border: 1px solid green; 
          padding: 15px;
          font-size: 20px;
      }
      /* Tooltip on top */
      .test + .tooltip.top > .tooltip-arrow {
          border-top: 5px solid green;
      }
      /* Tooltip on bottom */
      .test + .tooltip.bottom > .tooltip-arrow {
          border-bottom: 5px solid blue;
      }
      /* Tooltip on left */
      .test + .tooltip.left > .tooltip-arrow {
          border-left: 5px solid red;
      }
      /* Tooltip on right */
      .test + .tooltip.right > .tooltip-arrow {
          border-right: 5px solid black;
      }
      </style>

  2.  

  3. #2
    Junior Member
    Join Date
    Mar 2016
    Posts
    2
    Member #
    53610
    Solvd this. Turns out you need to have your custom css declared after bootstraps in the head section and not before like I have.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 06:00 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com