Create Simple CSS Tooltips Using Title Attribute

Share:

Create Simple CSS Tooltips Using Title Attribute Create Simple CSS Tooltips Using Title AttributeTutorial : Create Simple CSS Tooltips Using Title Attribute. According wikipedia, tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small “hover box” with information about the item being hovered over. Tooltip is very useful, as explanatory of a link, an image or a specific word in a website.
See here: Create Simple CSS Tooltip Using Title Attribute

If we put a title attribute on the html image or hyperlink and then when we point the cursor, then the title will automatically appear. In the development of the web design world, now tooltip can be made with the help from website programming like css, javascript, jquery and even the shape is getting more beautiful.
Create Simple CSS Tooltips Using Title Attribute Create Simple CSS Tooltips Using Title Attribute

Tutorial : Create a Simple CSS Tooltip Using Title Attribute

In this post, we will discuss specifically how to create a simple tooltip from title attribute using CSS, so that no additional other tags or other script to create a unique tooltip. Very easy and simple, just add a title attribute on each link that you created then the tooltip will appear.
Let’s follow the simple tutorial to create a css tooltip using title attribute :

1. Create a Hyperlink

As noted above, we only create tooltip use html link as usual and add the title attribute in it. example

<a title1="Create Simple CSS Tooltip Using Title Attribute" href="http://tutorial.world.edu/website-design/tooltip/create-simple-css-tooltips-using-title-attribute/"> Create Simple CSS Tooltip Using Title Attribute </a>

2. Create CSS Tooltip

The next step is to enter the CSS script to create a tooltip from title attribute so much more interesting. Save this CSS script among <head> and </head> or upload in the CSS file. eg, css-tooltip.css

a {
  color: #900;
  text-decoration: none;
}
a:hover {
  color: red;
  position: relative;
}
a[title1]:hover:after {
  content: attr(title1);
  padding: 4px 8px;
  padding: 4px 8px 4px 37px;   
  color: #fff;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
background:url(http://3.bp.blogspot.com/-spNkTF1j_0s/UYcaJx3JUYI/AAAAAAAAAWU/7Q99tUXlfkk/s1600/Create+Simple+CSS+Tooltips+Using+Title+Attribute+Images.png) no-repeat;
background-color:#000;
}

The results will be as shown below and compared with the previous. Tooltip is now more attractive ..
Create Simple CSS Tooltips Using Title Attribute Create Simple CSS Tooltips Using Title AttributeHopefully this tutorial can be very useful for you
Thank you for taking the time to read the Tutorial : Create a Simple CSS Tooltip Using Title Attribute


[Tutorial.World.Edu]

7 thoughts on “Create Simple CSS Tooltips Using Title Attribute

  1. Great! works pefect

    the only issue for me, is that now appears 2 tittles:
    -The browser one: yellow and simple
    -The custom

    Is wierd, but is like these..
    You know how to erease the browser one?

    Thanks a lot!

    • In older browsers, the tooltips script work properly without showing default yellow title. Now, I had changed and test it in a browser, a simple tooltip can appear without being followed by the default title. please try the script above

Leave a Reply

Your email address will not be published. Required fields are marked *