自定义tooltip 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
.myTitle {
  position: absolute;
  z-index: 5999;
  border: solid 1px #315B6C;
  padding: 2px 5px;
  color: #fff;
  background: none repeat scroll 0 0 #FFFFFF;
  border-radius: 3px;
  display: none;
  background-color: #222;
}
/* .myTitle:before {
  position: absolute;
  bottom: auto;
  left: -1px;
  top: -15px;
  border-color: transparent transparent transparent #315B6C;
  border-style: solid;
  border-width: 15px;
  content: "";
  display: block;
  width: 0;
  background-color: transparent;
}
.myTitle:after {
  position: absolute;
  bottom: auto;
  left: 0px;
  top: -13px;
  border-color: transparent transparent transparent #FFFFFF;
  border-style: solid;
  border-width: 15px;
  content: "";
  display: block;
  width: 0;
  background-color: transparent;
} */
</style>
<body>
    <a href="http:vscss.com" title="vscss" >vscss</a>
</body>

<script type="text/javascript" src="http:vscss.com/dm/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $("a[title]").each(function() {
    var a = $(this);
    var title = a.attr('title');
    if (title == undefined || title == "") return;
    a.data('title', title)
      .removeAttr('title')
      .hover(
        function () {
          var offset = a.offset();
          $("<div class=\"myTitle\"></div>").appendTo($("body")).html(title).css({ top: offset.top + a.outerHeight() - 1, left: offset.left + a.outerWidth() + 1 }).fadeIn(function () {
            var pop = $(this);
            //setTimeout(function () { pop.remove(); }, pop.text().length*80);
          });
        },
        function() { $(".myTitle").remove(); }
      );
  });
});
</script>
</html>

 

posted on 2016-10-09 13:54  jasonduanmu  阅读(203)  评论(0)  编辑  收藏  举报

导航