Question

我在日历中有一些tootlip的代码。我希望能够在工具提示中显示html这可能吗？每次我尝试改变它接受html它崩溃它只允许文本现在我不明白如何更改它以允许html

        <!DOCTYPE html>
        <html>
        <head>
          <meta http-equiv="content-type" content="text/html; charset=UTF-8">
          <title></title>

          <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>

          <link rel="stylesheet" type="text/css" href="/css/normalize.css">
          <link rel="stylesheet" type="text/css" href="/css/result-light.css">


              <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
              <script type='text/javascript' src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>


          <style type='text/css'>
            .pink > a {
            background-color: pink !important;
            background-image:none !important;
        }

        .green > a {
            background-color: green !important;
            background-image: none !important;
        }

          </style>



        <script type='text/javascript'>//<![CDATA[
        $(window).load(function(){
        var Event = function(text, className) {
            // would like to convert this to allow for html
            this.text = text;
            // this.html = text; // does not work
            this.className = className;
        };

        var events = {};
        events[new Date("01/01/2013")] = new Event("New Years Day", "pink");
        events[new Date("12/25/2012")] = new Event("<B>Merry</b> Christmas", "green");

        console.dir(events);

        $("#dates").datepicker({
            beforeShowDay: function(date) {
                var event = events[date];
                if (event) {
                    return [true, event.className, event.text];
                }
                else {
                    return [true, '', ''];
                }
            }
        });
        });//]]>

        </script>


        </head>
        <body>
          <div id="dates"></div>


        </body>


        </html>

提前感谢您提供的任何代码或帮助

约翰尼

Answer 1

title属性不允许使用html代码。

但是有几个框架允许你修改悬停。

我使用了jQuery Tooltip

<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js"></script>
$('*').tooltip();

在这里，您将看到他们的工具提示已被修改，并且粗体已到位。

http://jsfiddle.net/Morlock0821/WqrMK/

函数this.text = text;到HTML

1 个答案: