definition tooltips

Definition Tooltips

Definition tooltips are to be used within a paragraph element (<p></p>). They appear on focus or hover and disappear on blur or mouseout.

What is needed?

The following is needed for the definition tooltips to work properly:

• A "dqpl-definition-button-wrap" element (most likely want it to be an inline element like a span).
• A button with the "dqpl-button-definition" class. This button also needs the "data-help-text" attribute of the desired text of the tooltip.

Example HTML

This example would create a tooltip with the text "Self-possessed, calm, or composed."

<p>"Everything in this man’s manner revealed a calm and
  <span class="dqpl-definition-button-wrap">
    <button class="dqpl-button-definition" data-help-text="Self-possessed, calm, or composed.">phlegmatic</button>
    <div class="dqpl-inline">temperament. There was nothing indolent about him, but his appearance spoke of tranquillity. He was one of those who never seemed to expect anything from anybody, who liked to work when he thought proper, and whose philosophy nothing could astonish or trouble."</div>
  </span>
</p>