Choosing a jQuery Tooltip Plugin - main considerations?

39 views Asked by At

What are the key considerations I should take if I need a tooltip plugin that will allow me the most basic use (simple pop box with a little "triangle" pointing towards the hovered element)?

I saw Qtip2 is supposed to support IE6+ while Jquery UI supports IE8+ so that's one consideration I guess, but what else?

I saw this comparison, the author talks about setting the title "from code" vs "static". Not sure I understand the terminology and the actual consequences that this difference will lead to?

Also, Are any of the 4 tools mentioned in that comparison are especially light or heavy? and shall I simply take the least code I need and run if from my own server, or use the full code, on the creator's CDN?

1

There are 1 answers

2
guest271314 On

Try using css :hover , :after

div:hover:after {
  content: attr(data-tooltip);
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  background: blue;
  color: gold;
  left: 60px;
  padding:4px;
  position: absolute;
}

div:hover #triangle-left {
  display:block;
}

#triangle-left {
  top: 15px;
  left:50px;
  position:absolute;
  display:none;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-right: 10px solid blue;
  border-bottom: 5px solid transparent;
}
<div data-tooltip="abc"><span>hover</span><span id="triangle-left"></span></div>