Java Ninja Chronicles By Norris Shelton

Things I learned in the pursuit of code

Bootstrap 3 tooltips are fairly easy to use. They also offer excellent cross-browser support while also being responsive.

If you are already using Bootstrap 3, then it is fairly easy to start using the tooltips. The first step is to add the HTML markup.

<a href="#"
     data-toggle="tooltip"
     title="My tooltip text">Tooltip target</a>

That is fairly straight forward. The title contains the text that will be displayed in the tooltip. data-toggle is a custom attribute and is used by the required javascript to trigger the markup as a tooltip.

The required javascript is

<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>

That’s all it takes for a basic tooltip. Sometimes you need to customize the functionality. The default behavior is to trigger the tooltip on click. Sometimes you need other triggers, hover for example. This can be accomplished by adding data-trigger.

<a href="#"
     data-toggle="tooltip"
     data-trigger="hover click"
     title="My tooltip text">Tooltip target</a>

If you want to style the text, all you need to do is add normal class attribute. In my case, I made a css style especially for this purpose.

<a href="#"
     class="tooltip_text"
     data-toggle="tooltip"
     title="My tooltip text">Tooltip target</a>

By default, HTML markup is not displayed as HTML when it is included as part of the tooltip text. This can be enabled by adding data-html.

<a href="#"
     data-html="true"
     data-toggle="tooltip"
     title="My tooltip text">Tooltip target</a>

We did encounter a problem with using an <a> as the HTML element. The page will attempt to scroll to the anchor when clicked. We overcame this by using a tag.

<span data-toggle="tooltip"
      title="My tooltip text">
  Tooltip target
</span>

The default placement for the tooltips is above the trigger. Use data-placement to specify left, right or bottom.

<a href="#"
     data-placement="bottom"
     data-toggle="tooltip"
     title="My tooltip text">Tooltip target</a>

June 10th, 2015

Posted In: Bootstrap, CSS, HTML

Tags: , , , , ,

Leave a Comment

Grunt, grunt, grunt. This is my first gruntfile. Once you get in the groove, it’s pretty easy to write them quickly.

module.exports = function (grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        clean: ['build'],
        less: {
            current: {
                files: [
                    {
                        expand: true,
                        cwd: "current/styles",
                        src: [
                            'global/**/*.less',  // need to process the global css separately from the rest
                            'modules/**/*.less'
                        ],
                        dest: 'build/temp/css',
                        ext: '.css'
                    }
                ]
            },
            working: {
                files: [
                    {
                        expand: true,
                        cwd: "working/styles",
                        src: [
                            'global/**/*.less', // need to process the global css separately from the rest
                            'modules/**/*.less'
                        ],
                        dest: 'build/temp/css-working',
                        ext: '-working.css'
                    }
                ]
            }
        },
        concat: {
                css: {
                    options: {
                        sourceMap: true
                    },
                    files: {
                        'build/compiled/css/<%= pkg.name %>.css': [
                            'bootstrap-3.3.4/dist/css/bootstrap.css',
                            'build/temp/css/global/igaming.css',
                            'build/temp/css/modules/**/*.css'],  // note would be better to use files created in less task via something like'<%= less.working.files.dest %>'
                        'build/compiled/css/<%= pkg.name %>-working.css' : [
                            'bootstrap-3.3.4/dist/css/bootstrap.css',
                            'build/temp/css-working/global/igaming.css',
                            'build/temp/css-working/modules/**/*.css'  // note would be better to use files created in less task via something like'<%= less.working.files.dest %>'
                        ]
                    }
                },
                js: {
                    options: {
                        separator: ';',
                        sourceMap: true
                    },
                    files: {
                        'build/compiled/js/<%= pkg.name %>.js': [
                            // load jquery, bootstrap, then the rest
                            'current/scripts/jquery/*.js',
                            'bootstrap-3.3.4/dist/js/bootstrap.js',
                            'current/scripts/libs/*.js',
                            'current/scripts/js/*.js',
                            'current/scripts/igaming/*.js'
                        ],
                        'build/compiled/js/<%= pkg.name %>-working.js': [
                            // load jquery, bootstrap, then the rest
                            'working/scripts/jquery/*.js',
                            'bootstrap-3.3.4/dist/js/bootstrap.js',
                            'working/scripts/libs/*.js',
                            'working/scripts/js/*.js',
                            'working/scripts/igaming/*.js'
                        ]
                    }
                }
        },
        uglify: {
            current: {
                options: {
                    sourceMap: true,
                    sourceMapIncludeSources: true,
                    sourceMapIn: 'build/compiled/js/<%= pkg.name %>.js.map'
                },
                files: {
                    'build/compiled/js/<%= pkg.name %>.min.js': 'build/compiled/js/<%= pkg.name %>.js' // wouldn't use '<%= concat.js.dest %>', for some reason
                }
            },
            working: {
                options: {
                    sourceMap: true,
                    sourceMapIncludeSources: true,
                    sourceMapIn: 'build/compiled/js/<%= pkg.name %>-working.js.map'
                },
                files: {
                    'build/compiled/js/<%= pkg.name %>-working.min.js': 'build/compiled/js/<%= pkg.name %>-working.js' // wouldn't use '<%= concat.js_working.dest %>', for some reason
                }
            }
        },
        cssmin: {
            options: {
                sourceMap: true
            },
            target: {
                files: {
                    'build/compiled/css/<%= pkg.name %>.min.css': ['build/compiled/css/<%= pkg.name %>.css'],
                    'build/compiled/css/<%= pkg.name %>-working.min.css': ['build/compiled/css/<%= pkg.name %>-working.css']
                }

            }
        },
        copy: {
            // builds the /assets webapp by copying the /webapp directory,
            // then copying the compiled css and js resources
            webapp: {
                files: [
                    {
                        expand: true,
                        cwd: 'webapp',
                        src: '**',
                        dest: 'build/assets'
                    }
                ]
            },
            compiled: {
                files: [
                    {
                        expand: true,
                        cwd: 'build/compiled',
                        src: '**',
                        dest: 'build/assets/compiled'
                    }
                ]
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-copy');


    // Default task(s).
    grunt.registerTask('default', ['clean', 'less', 'concat', 'uglify', 'cssmin', 'copy']);




    //grunt.registerTask("concat-css", "Concatenates the CSS files into a CSS file per section", function () {
    //
    //    // read all subdirectories from your modules folder
    //    grunt.file.expand("build/css").forEach(function (topDir) {
    //        console.log('topDir=' + topDir);
    //
    //        //grunt.file.setBase(topDir);
    //        // read all subdirectories from your modules folder
    //        grunt.file.expand("build/css").forEach(function (dir) {
    //            console.log('dir=' + dir);
    //
    //            console.log("cssFiles=" + cssFiles);
    //
    //            // get the current concat config
    //            var concat = grunt.config.get('concat') || {};
    //
    //            // set the config for this modulename-directory
    //            concat[cssFiles] = {
    //                //cwd: topDir,
    //                src: dir + '**/*.css',
    //                dest: dir + '.css'
    //            };
    //            // save the new concat configuration
    //            grunt.config.set('concat', concat);
    //        });
    //        // set the base to where it is supposed to be so that Grunt works as expected
    //        //grunt.file.setBase('../..');
    //    });
    //    // when finished run the concatenations
    //    grunt.task.run('concat');
    //});


};

June 9th, 2015

Posted In: grunt, Javaninja, javascript

Tags: , , , ,

Leave a Comment

WP to LinkedIn Auto Publish Powered By : XYZScripts.com