.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* Visual cue for users */
    cursor: help;
  }

  /* Styling for the hidden fancy text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 140px;
    margin-bottom:3px;padding:5px;color:#fff;font-weight:bold;text-decoration:none;background-color:#262626;
background: -moz-linear-gradient(top, rgba(136,187,85,0.7) 0%, rgba(221,255,170,0.7) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(136,187,85,0.7)), color-stop(100%,rgba(221,255,170,0.7))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(136,187,85,0.7) 0%,rgba(221,255,170,0.7) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(136,187,85,0.7) 0%,rgba(221,255,170,0.7) 100%); /* Opera11.10+ */
background: linear-gradient(top, rgba(136,187,85,0.7) 0%,rgba(221,255,170,0.7) 100%); /* W3C */
-webkit-box-shadow: rgba(0,0,0,0.75) 0px 0px 3px; -moz-box-shadow: rgba(0,0,0,0.75) 0px 0px 3px; box-shadow: rgba(0,0,0,0.75) 0px 0px 3px;
-webkit-background-clip: padding-box;
text-shadow: rgba(2,42,2,0.45) 0 -1px 0;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position above the text */
    left: 50%;
    margin-left: -70px;
    opacity: 0;
    transition: opacity 0.3s; /* Smooth fade-in effect */
  }

  /* Show the text on hover */
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
div#footer{background:#be8 text-align:center !important;padding-left:500px;}