Month: June 2016

CSS Tooltip, without JavaScript or Jquery

Posted on by jomendez

In this article I'm going to explore how to Create css tooltip, without using JavaScript or JQuery plugins.

css tooltip

Tooltips

Tooltips are great artifact to complement/enrich the user experience providing hint and more information to the user. There are a lots of JavaScript plugins that provides this functionality, but if you don’t feel like adding that weight to your site, adding more files and more JavaScript code, we can take care of it just using plain CSS.
As an alternative we can use the HTML title attribute to effectively accomplish the same solution, but you can’t style the tooltip to your liking.
Sometimes I prefer to use CSS alternatives to common JavaScript interactions when I’m developing specially when I'm developing prototypes. There are some projects where downloading a plugin or creating a new file for a few lines of code seems like overkill.

Here is a working example:

Hover over this

 

Creating a Css Tooltip

To create our tooltip just using css, we are going to take advantage of the ::before and ::after selector, we are going to use the ::before for the tooltip body and the ::after for the littler arrow. We are going to set the Tooltip content with data-tooltip parameter of the html element.

 <span class="tooltip-toggle" data-tooltip="Sample text for your tooltip!">
     Hover over this
 </span>

 

book

Book Tip

CSS Mastery
Fully updated to the latest CSS modules, make the journey to CSS mastery as simple and painless as possible. This book dives into advanced aspects of CSS-based design, such as responsive design, modular CSS, and CSS typography.

Amazon

 

 

Definition and Usage.

::after selector inserts something after the content of each selected element(s).
You can use the content property to specify the content to insert. This property can be combined with the attr() attribute to get the text from an html atribute.
::before selector inserts something before the content.
Example:

.tooltip-toggle::before {
  position: absolute;
  top: -80px;
  left: -80px;
  background-color: green;
  border-radius: 5px;
  color: #fff;
  content: attr(data-tooltip);
  padding: 1rem;
  text-transform: none;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  width: 160px;

.tooltip-toggle::after {
  position: absolute;
  top: -12px;
  left: 9px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid green;
  content: " ";
  font-size: 0;
  line-height: 0;
  margin-left: -5px;
  width: 0;
}
}

With the :hover we can show/hide the tooltip as a transition:

.tooltip-toggle:hover::before,
.tooltip-toggle:hover::after {
  opacity: 1;
  -webkit-transition: all 0.75s ease;
  transition: all 0.75s ease;
}

.tooltip-toggle::before,
.tooltip-toggle::after {
  color: #efefef;
  font-family: monospace;
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
  text-align: center;
}

Here is the full code example of the css tooltip:

Interview Question

You can also use this article as reference to create css interview questions for a seasoned front-end developer, to validate the deep experience on using, formating the ::before and ::after elements.

Prevent angular executing controller twice (Mini-Challenge 11)

Posted on by jomendez

Prevent angular executing controller twice (Mini-Challenge 11)

Prevent angular executing controller twice

AngularJs Mini-Challenges is a growing collection of "Challenges" about the most quirky parts of the AngularJs framework. It encourage you to find and fix common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert AngularJs programmers may encounter on their endeavours into the depths of the framework.

AngularJs Mini-Challenges does not aim to teach you AngularJs. Former knowledge of the Framework is strongly recommended in order to understand the topics covered in this Challenges. In order to learn the basics of the Framework, please head over to this excellent book:

 

book

Book Tip

ng-book - The Complete Book on AngularJS
Ready to master AngularJS? What if you could master the entire framework – with solid foundations – in less time without beating your head against a wall?


Amazon

 

 

The Challenge:

We have an Angularjs application. For this challenge we are going to show only the fragment of code necessary to solve the challenge. Below we have the controller, the view and the router. when you navigate to the #/dashboard page you noticed that the controller is executed twice by placing a breakpoint in your browser console. This makes the analyticsServices.save() method to execute twice duplicating the data in your database. What you would do to prevent angular executing controller twice?

This is the controller

function MyController($scope, userServices, analyticsServices) {

    userServices.get({ id: $scope.currentUserId },
        function(user) {
            analyticsServices.save(user);
        });
}

This is a fragment of the code in the view:

<!-- dashboard.html -->
<div ng-controller="MyController">

<!-- html content -->

</div>

This is the of the router

 .when('/dashboard', {
            templateUrl: '/app/dashboard/dashboard.html',
            controller: 'MyController',
            controllerAs: 'ctr',
            title: 'Dashboard'
});

Solution:

Having the controller defined in the controller property in the router and also defined in the ng-controller in the view, this digested the controller twice. Removing the ng-controller directive from the HTML view can resolve the issue. Alternatively, you can remove the controller: property from the routing directive.

Hope this was helpful, please feel free to leave your comments, share other scenarios, or improve this solution! 🙂