Link with Title Attribute Tooltip Positioned Above Trigger

Button with Title Attribute Tooltip Positioned Above Trigger

Link with Title Attribute using Tooltip Class

An Input

First Name

CODE

CSS

		
/*CSS to position tooltip of title attribute above trigger fpr link and button*/

  /* a[title]:hover:after, button[title]:hover:after,*/ 

a[title]:focus:after, button[title]:focus:after, input[title]:focus:after  {

  content: attr(title);

  position: relative;

  top: -20px;

  left: -20px;

  padding: 5px, 15px;

  background: black;

  color: white;

  border-radius: 3px;

  }

.tooltip2:hover .tooltiptext, .tooltip2:focus .tooltiptext {

  visibility: visible;

  }


</style>

html

<a href="#" title="Tooltip Text">This is a link</a>
<h2>Button with Title Attribute Tooltip Positioned Above Trigger</h2>
<button title="Submit Your Answer">Submit</button>
<h2>Link with Title Attribute using Tooltip Class</h2>
<a title="some advisory info" href="#" class="tooltip">Link with Tooltip Class</a>
<h2> An Input</h2>
<p>
  <label for="p1">First Name</label> 
  <input id="p1" title="The one your mama gave you" type="text">