jQuery 美化title属性提示优化样式效果

在网页设计中，标题提示（title属性）是一个常用的工具，用于为用户提供额外的信息。然而，默认的浏览器提示样式往往显得单调且不够吸引人。通过使用jQuery，我们可以轻松地美化这些提示，使其更具视觉吸引力，提升用户体验。

本示例展示了如何使用jQuery动态创建一个自定义的提示框，并为其添加样式。通过这种方式，您可以确保提示框在页面上的任何位置都能完美显示，并且具有一致的外观和感觉。

样式可以查看本站的a或img标签。

引入jQuery

首先这个功能需要先引入jQuery才能实现。

JavaScript

var sweetTitles = {
  x: 10,
  y: 20,
  tipElements: "a,i,span,img,div",
  noTitle: false,
  init: function () {
    var b = this.noTitle;
    $(this.tipElements).each(function () {
      $(this)
        .mouseover(function (e) {
          if (b) {
            isTitle = true;
          } else {
            isTitle = $.trim(this.title) != "";
          }
          if (isTitle) {
            this.myTitle = this.title;
            this.title = "";
            var weianettip =
              "<div class='weianettip'><div class='tips-arrow tips-arrow-n'></div><div class='tips-inner'>" +
              this.myTitle +
              "</div></div>";
            $("body").append(weianettip);
            var offset = $(this).offset();
            $(".weianettip")
              .css({
                top: offset.top + $(this).outerHeight() + 0 + "px",
                left: offset.left + "px",
              })
              .show("fast");
          }
        })
        .mouseout(function () {
          if (this.myTitle != null) {
            this.title = this.myTitle;
            $(".weianettip").remove();
          }
        });
    });
  },
};
$(function () {
  sweetTitles.init();
});

CSS 样式

.weianettip{font-size:12px;position:absolute;padding:5px;z-index:100000;opacity:.9}
.tips-arrow{position:absolute;width:0;height:0;line-height:0;top:0;left:8px;border-bottom:6px solid #666;border-top:0;border-left:6px dashed transparent;border-right:6px dashed transparent}
.tips-arrow-n{border-bottom-color:#666}
.tips-inner{background-color:#666;color:#fff;max-width:100%;padding:3px 6px;text-align:left;border-radius:6px}

通过这种方式，您可以显著提升网站的用户体验，使提示信息更加直观和美观。