How To Invoke A "tooltip" When Hovering Over Id'd Html Elements In A Browser?

I am working on a version of 'Huck Finn' that displays dialog in different colors, depending on the speaker (purple for Huckleberry, brown for his Pap, etc.) by using CSS like so #

Solution 1:

what about an :after

#huck {position:relative;}
#huck:hover:after {
    position:absolute;
    content:'This is huck talking';
    top:30px;
    left:0;
    display:inline-block;
    background-color:violet;
    color:white;

}

And no need to add so many multiple tittle tags in all yout html.. plus you can stylize the "tooltip" as You wish.

Solution 2:

Suggesting title attribute over the paragraph tag

<p><span id="huck" title="Huck is speaking">"But some says he got out and got away, and come to America."</span></p>

Solution 3:

To add to @Alvaro-Menéndez answer, I found a pure css solution on SO.

Check the fiddle: http://jsfiddle.net/lharby/tL4s1hjr/82/

It uses CSS3 selectors to style the title attribute:

span:hover {
    position:relative;
    cursor:pointer;
}

span[title]:hover:after {
  content: attr(title);
  background:yellow;
  padding: 4px8px;
  color: #000;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  white-space: nowrap;
}

This was answered here on SO

Initially I was going to try and come up with a jquery hover function, but I think this is much neater.

Solution 4:

You could try using Kendo UI Tooltips. You can style them anyway you wish and change some settings such as the position in which it appears.

$("#aTooltip").kendoTooltip({
  position: "top",
  animation: {
    open: {
      effects: "fadeIn",
      duration: 300
    },
    close: {
      effects: "fadeIn",
      reverse: true,
      duration: 300
    }
  }
});
$("#aTooltip2").kendoTooltip({
  position: "bottom",
  animation: {
    open: {
      effects: "slideIn:left",
      duration: 300
    },
    close: {
      effects: "slideIn:left",
      reverse: true,
      duration: 300
    }
  }
});
$("#aTooltip3").kendoTooltip({
  position: "right",
  animation: {
    open: {
      effects: "zoom",
      duration: 300
    },
    close: {
      effects: "zoom",
      reverse: true,
      duration: 300
    }
  }
});

.tts {
  float: left;
  margin: 020px;
}

<linkrel="stylesheet"href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css"><linkrel="stylesheet"href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.silver.min.css"><scriptsrc="http://code.jquery.com/jquery-1.9.1.min.js"></script><scriptsrc="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script><br/><divid="tooltips"><divid="aTooltip"class="tts"title="Here is a tooltip">
    This is one
  </div><p></p><divid="aTooltip2"class="tts"title="Here is another tooltip">
    This is two
  </div><p></p><divid="aTooltip3"class="tts"title="Here is some other tooltip">
    This is three
  </div><p></p></div>

Could this be of use to you? You can edit the tooltip style as you wish, giving it some prettier look than the default title tooltip, or use some of the Kendo UI default styles for tooltips.

You can also add animations to the tooltips.