Last active
December 14, 2015 07:48
-
-
Save tomhodgins/5052910 to your computer and use it in GitHub Desktop.
Brainstorming some extra styles to supplement Bootstrap's default Tooltip style
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Bootstrap Tooltip Styles</title> | |
| <!-- Bootstrap: with responsive, no icons --> | |
| <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"> | |
| <!-- FontAwesome --> | |
| <link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"> | |
| <!-- jQuery --> | |
| <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> | |
| <!-- Boostrap JavaScript --> | |
| <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script> | |
| <!-- Source Sans via Google Web Fonts --> | |
| <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'> | |
| </head> | |
| <body> | |
| <!-- HTML Section --> | |
| <div class="container"> | |
| <div class="row-fluid"> | |
| <div class="span12"> | |
| <div class="hero-unit"> | |
| <h1 style="text-align:center;">Additional Tooltip Styles</h1> | |
| <h2>Default Bootstrap</h2> | |
| <p>Sed vitae turpis eget <a href="#" data-toggle="tooltip" title="This is a regular Bootstrap tooltip">nulla ullamcorper</a> interdum aliquam at libero. Nulla magna enim, vehicula a molestie at, scelerisque sit amet libero. Fusce vitae blandit dolor. Donec quis velit mi. Nulla dictum sollicitudin tristique. Vivamus arcu tortor, <a href="#" data-toggle="tooltip" title="This is a regular Bootstrap tooltip">vehicula quis</a> facilisis a, ullamcorper ut libero. Aliquam elementum nisi in risus vehicula sit amet faucibus nisi feugiat. Vivamus lorem neque, hendrerit vel posuere ut, convallis ornare diam.</p> | |
| <h2>.tooltip-square</h2> | |
| <p>Ut imperdiet, urna et dictum commodo, <a href="#" class="tooltip-square" data-toggle="tooltip" title="This is a test tooltip">odio mi varius</a> ipsum, id porttitor ligula velit eget est. Aliquam tempor ipsum et leo tristique venenatis. Curabitur diam sapien, euismod non tempus ut, scelerisque feugiat tortor. <a href="#" class="tooltip-square" data-toggle="tooltip" title="This is another test tooltip">Maecenas</a> lobortis nisi a tortor vehicula convallis. Suspendisse dictum, dui sed blandit lacinia, risus nunc faucibus ligula, ac congue metus justo et nisi. Mauris vel ipsum non ligula cursus tincidunt vitae sit amet sem. Proin eget nisl sit amet metus <a href="#" class="tooltip-square" data-toggle="tooltip" title="This is the last white tooltip">commodo cursus</a>. Nunc nisl nisl, aliquam id posuere sit amet, tempor sit amet ligula. Cras a nunc enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> | |
| <h2>.tooltip-stripe</h2> | |
| <p>Nunc posuere <a href="#" class="tooltip-stripe" data-toggle="tooltip" title="This is a grey tooltip">mollis lectus</a> id dapibus. <a href="#" class="tooltip-stripe-red" data-toggle="tooltip" title="This is a red striped tooltip">Vestibulum</a> condimentum mauris in sapien fermentum non facilisis ligula bibendum. Sed non nisi in enim bibendum faucibus. <a href="#" class="tooltip-stripe-blue" data-toggle="tooltip" title="This is a blue striped tooltip">Cras</a> accumsan porta mauris vel commodo. Integer <a href="#" class="tooltip-stripe-green" data-toggle="tooltip" title="This is a green striped tooltip">sapien</a> orci, iaculis eu molestie in, dignissim sit amet purus. Nullam rutrum viverra lacus. Duis fermentum ante sit amet erat vehicula auctor. <a href="#" class="tooltip-stripe-orange" data-toggle="tooltip" title="This is an orange striped tooltip">Aliquam</a> quis mi risus, sed rutrum nisi. Ut lobortis luctus dolor, vel aliquet augue ultrices quis. <a href="#" class="tooltip-stripe-yellow" data-toggle="tooltip" title="This is a yellow striped tooltip">Aliquam</a> vitae quam neque, vitae egestas risus. Suspendisse sollicitudin faucibus augue, sit amet gravida sem tempor non. Quisque ac dolor nec <a href="#" class="tooltip-stripe-purple" data-toggle="tooltip" title="This is a purple striped tooltip">risus</a> malesuada aliquet. Etiam dui mi, semper sed viverra adipiscing, auctor eget ante.</p> | |
| <h2>.tooltip-icon</h2> | |
| <p>Nunc posuere <a href="#" class="tooltip-icon" data-toggle="tooltip" title="This is a tooltip with an icon">mollis lectus</a> id dapibus. <a href="#" class="tooltip-icon-globe" data-toggle="tooltip" title="This tooltip includes a globe icon">Vestibulum</a> condimentum mauris in sapien fermentum non facilisis ligula bibendum. Sed non nisi in enim bibendum faucibus. <a href="#" class="tooltip-icon-bolt" data-toggle="tooltip" title="This tooltip has a bolt icon">Cras</a> accumsan porta mauris vel commodo. Integer <a href="#" class="tooltip-icon-check" data-toggle="tooltip" title="This is an action">sapien</a> orci, iaculis eu molestie in, dignissim sit amet purus. Nullam rutrum viverra lacus. Duis fermentum ante sit amet erat vehicula auctor. <a href="#" class="tooltip-icon-lightbulb" data-toggle="tooltip" title="This is an idea tooltip">Aliquam</a> quis mi risus, sed rutrum nisi. Ut lobortis luctus dolor, vel aliquet augue ultrices quis. <a href="#" class="tooltip-icon-dont" data-toggle="tooltip" title="Never do this">Aliquam</a> vitae quam neque, vitae egestas risus. Suspendisse sollicitudin faucibus augue, sit amet gravida sem tempor non. Quisque ac dolor nec <a href="#" class="tooltip-icon-question" data-toggle="tooltip" title="This is a question">risus</a> malesuada aliquet. Etiam dui mi, semper sed viverra adipiscing, auctor eget ante.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- JavaScript Section --> | |
| <script type="text/javascript"> | |
| $(document).ready(function(){ | |
| $('a[data-toggle=tooltip]').tooltip(); | |
| }); | |
| </script> | |
| <!-- CSS Section --> | |
| <style> | |
| * { | |
| font-family: 'Source Sans Pro', sans-serif; | |
| } | |
| .hero-unit { | |
| margin-top: 100px; | |
| font-weight: 400; | |
| } | |
| /* tooltip-square */ | |
| .tooltip-square + div.tooltip .tooltip-inner { | |
| font-size: 12pt; | |
| box-shadow: rgba(0,0,0,0.2) 0px 5px 15px; | |
| color: #333333; | |
| background-color: #ffffff; | |
| -webkit-border-radius: 0px; | |
| -moz-border-radius: 0px; | |
| border-radius: 0px; | |
| } | |
| .tooltip-square + .tooltip.top .tooltip-arrow { | |
| border-top-color: #fff; | |
| } | |
| /* tooltip-stripe */ | |
| .tooltip-stripe + div.tooltip .tooltip-inner, | |
| [class^="tooltip-stripe-"] + div.tooltip .tooltip-inner { | |
| font-size: 12pt; | |
| box-shadow: rgba(0,0,0,0.2) 0px 5px 15px; | |
| color: #333333; | |
| background-color: #ffffff; | |
| -webkit-border-radius: 0px; | |
| -moz-border-radius: 0px; | |
| border-radius: 0px; | |
| border-left: 5px solid #888a85; | |
| } | |
| .tooltip-stripe + .tooltip.top .tooltip-arrow, | |
| [class^="tooltip-stripe-"] + .tooltip.top .tooltip-arrow { | |
| border-top-color: #fff; | |
| } | |
| .tooltip-stripe-red + div.tooltip .tooltip-inner { | |
| border-color: #e20800; | |
| } | |
| .tooltip-stripe-blue + div.tooltip .tooltip-inner { | |
| border-color: #0057ae; | |
| } | |
| .tooltip-stripe-green + div.tooltip .tooltip-inner { | |
| border-color: #37a42c; | |
| } | |
| .tooltip-stripe-yellow + div.tooltip .tooltip-inner { | |
| border-color: #ffdd00; | |
| } | |
| .tooltip-stripe-orange + div.tooltip .tooltip-inner { | |
| border-color: #eb7331; | |
| } | |
| .tooltip-stripe-purple + div.tooltip .tooltip-inner { | |
| border-color: #a02786; | |
| } | |
| /* tooltip-icon */ | |
| .tooltip-icon + div.tooltip .tooltip-inner, | |
| [class^="tooltip-icon-"] + div.tooltip .tooltip-inner { | |
| font-size: 12pt; | |
| box-shadow: rgba(0,0,0,0.2) 0px 5px 15px; | |
| color: #333333; | |
| background-color: #ffffff; | |
| -webkit-border-radius: 0px; | |
| -moz-border-radius: 0px; | |
| border-radius: 0px; | |
| max-width: 300px; | |
| } | |
| .tooltip-icon + .tooltip.top .tooltip-arrow, | |
| [class^="tooltip-icon-"] + .tooltip.top .tooltip-arrow { | |
| border-top-color: #fff; | |
| } | |
| .tooltip-icon + div.tooltip .tooltip-inner:before, | |
| [class^="tooltip-icon-"] + div.tooltip .tooltip-inner:before { | |
| content: "\f05a"; | |
| font-family: FontAwesome; | |
| font-weight: normal; | |
| opacity: .75; | |
| margin-right: 5px; | |
| font-size: 14pt; | |
| position: relative; | |
| top: 2px; | |
| } | |
| .tooltip-icon-globe + div.tooltip .tooltip-inner:before { | |
| content: "\f0ac"; | |
| } | |
| .tooltip-icon-bolt + div.tooltip .tooltip-inner:before { | |
| content: "\f0e7"; | |
| } | |
| .tooltip-icon-check + div.tooltip .tooltip-inner:before { | |
| content: "\f046"; | |
| } | |
| .tooltip-icon-lightbulb + div.tooltip .tooltip-inner:before { | |
| content: "\f0eb"; | |
| } | |
| .tooltip-icon-dont + div.tooltip .tooltip-inner:before { | |
| content: "\f05e"; | |
| } | |
| .tooltip-icon-question + div.tooltip .tooltip-inner:before { | |
| content: "\f059"; | |
| } | |
| </style> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment