个人中心
gpt4 book ai didi

javascript - 如何创建自定义工具提示

转载 作者：行者123 更新时间：2023-11-28 02:57:52 40 4
gpt4 key购买 nike

我对 HTML、JavaScript 和任何其他与编码相关的问题都非常陌生。但是，我一直依靠教程为学校项目建立网站。我设法使用 jQuery 库来获取折线图(来自 chart.js)，但我也希望能够在我的内容上显示工具提示。 (具体来说，this one)我无法显示工具提示，我想知道如何解决这个问题，因为我找不到任何教程。我之前也尝试过将 chart.js 与 powertip.js 一起使用，这是另一个 jquery 插件。

这是我的代码:

<head>
    <title>get1030 project</title>
    <style>

    @font-face {
        font-family: "brandon";
        src: url('Brandon_reg.otf') format('opentype');
    }

    body {
        font-family: "brandon", helvetica, sans-serif;
        background-color: #f3f3f3;
    }

    #container {
        max-width: 900px;
        margin: 0 auto;
        background-color: #fff;
        padding: 32px;
    }

    header {
        background-color: #336699;
        height: 150px;
        padding: 4px;
    }

    header h1 {
        text-transform: lowercase;
        text-align: center;
        color: #fff;
        line-height: 60px;
    }

    header h2 {
        text-transform: lowercase;
        line-height: 2px;
        font-size: 18px;
        text-align: center;
        color: #fff; 
    }

    nav {
        padding: 5px 0 5px 0;
        text-align: center;
        line-height: 35px;
        background-color: #818181;
    }

    nav ul {
        margin-top: 20px;
        list-style-type: none;
        padding: 0;
        margin: 0;
        position: relative;
    }

    nav ul li {
        display: inline-block;
        padding: 0 22px 0 22px;
        font-size: 17px;
    }


    nav a {
        text-decoration: none;
        color: #fff;
        padding: 8px;
        font-variant: small-caps;
    }

    nav a:hover {
        color: #336699;
    }
    nav ul li:hover ul{
        display: block;

    }

    nav ul ul {
        display: none;
        position: absolute;
        background-color: #333;
        margin-left: -33px;

    }

    nav ul ul li {
        display: block;
        font-size: 15px;
    }

    #linechart1 {

        position: relative;
        left: 40px;

    }

    #legend ul {
        list-style: none;
        font-size: 12px;
                }


    #legend ul li {
        display: inline;
        padding: 13px;
    }


    #graphtitle {
        position: relative;
        left: 40px;
        text-decoration: underline;
    }

    #linechart1 {

        position: relative;
        left: 40px;

    }

    #legend ul {
        list-style: none;
        font-size: 12px;
                }


    #legend ul li {
        display: inline;
        padding: 13px;
    }


    h3 {
        margin-left: 40px;
    }

    article {
        margin-left: 40px;
        margin-right: 40px;     

    }

    </style>
    <script src="jquery-2.2.1.min.js"></script>
    <script src="Chart.js"></script>
    <script src="html5tooltips.1.4.2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="html5tooltips.animation.css" />
    <link rel="stylesheet" type="text/css" href="html5tooltips.css" />

</head> 

<body>
    <div id="container">
        <header>
            <h1>stereotypes of women in popular music lyrics</h1>
            <h2>a digital humanities project</h2>
        </header>
        <nav>
            <ul>
                <li><a href="index">home</a></li><li>
                <a href="overview">overview</a></li><li>
                <a href="f">stereotypes</a>
                    <ul>
                        <li><a href="stereotype_objectification.html">sex objects</a></li>
                        <li><a href="stereotype_weak.html">emotional/weak</a></li>
                        <li><a href="stereotype_femmefatale.html">femme fatales</a></li>
                        <li><a href="stereotype_toxic.html">toxic</a></li>
                    </ul>   
                </li><li>
                <a href="counter.html">against the stereotype</a></li><li>
                <a href="ref.html">references</a></li>
            </ul>
        </nav>

        <h3>methodology:</h3>
        <article>
            The lyrics of the top 40 songs of each year over the past decade (2007-2016) were reviewed to identify several common portrayals of women. The top 40 songs (insert tool tip or popup) was retrieved from <span data-tooltip="Refresh" data-tooltip-stickto="right" data-tooltip-color="bamboo" data-tooltip-animate-function="foldin">refresh</span> (pop up for billboard) year-end charts (charting methods) of the 'Hot 100' songs; except for the year 2016, where the chart for the week of March 26 2016 was used. 
            <br><br>

        </article><br>
        <div id="graphtitle">
            <strong>top 40s over the past 10 years</strong>
        </div><br>
        <div style="width: 100%; height: 100%;">
            <canvas id="linechart1" width="800" height "1500""></canvas>
        </div>  
        <div id="legend"></div>

    <script>

    $(function () {
        var data = {

        labels: ["2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015",
        "2016"],
        datasets: [
                        {
                            label: "women as femme fatales",
                            fillColor: "rgba(255, 229, 229, 0.2)",
                            strokeColor: "#ffcccc",
                            pointColor: "#ffb3b3",
                            pointStrokeColor: "#994D4D",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "#ffb3b3",
                            data: [3, 6, 5, 3, 8, 1, 1, 6, 4, 2]
                        },
                        {
                            label: "women as emotional and weak",
                            fillColor: "rgba(229, 255, 229, 0.2)",
                            strokeColor: "#ccffcc",
                            pointColor: "#b3ffb3",
                            pointStrokeColor: "#4D994D",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "#b3ffb3",
                            data: [4, 6, 5, 6, 3, 4, 4, 4, 3, 8]
                        },
                        {
                            label: "women as men's possessions/sex objects",
                            fillColor: "rgba(255, 247, 229, 0.2)",
                            strokeColor: "#ffeecc",
                            pointColor: "#ffe6b3",
                            pointStrokeColor: "#99804D",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "#ffe6b3",
                            data: [10, 9, 11, 8, 8, 7, 7, 8, 10, 13]
                        },
                        {
                            label: "women as strong and independent",
                            fillColor: "rgba(229, 247, 255, 0.2)",
                            strokeColor: "#cceeff",
                            pointColor: "#b3e6ff",
                            pointStrokeColor: "#4D8099",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "#b3e6ff",
                            data: [2, 3, 2, 1, 5, 5, 2, 5, 2, 1]
                        },
                        {
                            label: "women as toxic",
                            fillColor: "rgba(238, 229, 255, 0.2)",
                            strokeColor: "#ddccff",
                            pointColor: "#ccb3ff",
                            pointStrokeColor: "#664D99",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "#ccb3ff",
                            data: [0, 0, 0, 0, 1, 0, 1, 0, 1, 1]
                        }
                    ]
                };

        var option = {
            pointDot : true,
            scaleGridLineWidth : 1,


            };

        var ctx = $("#linechart1").get(0).getContext("2d");
        var myLineChart = new Chart(ctx).Line(data, option);

        document.getElementById('legend').innerHTML = myLineChart.generateLegend();


    }); 

    html5tooltips({
      animateFunction: "spin",
      color: "bamboo",
      contentText: "Refresh",
      stickTo: "right",
      targetSelector: "#refresh"
    });

    </script>

    <br>
    <article>
        As seen in the graph above, the number of songs that feature the sexual objectification of women is consistently the highest in the top 40s over the past ten years. 
    </article>
</body>

根据 html5tooltip.js 的 README 文件，

this is what I am supposed to do, but the tooltip does not show up

在此先感谢您，如果不清楚，我真的很抱歉!我为此花费了数小时。

最佳答案

enter image description here尝试通过提供 id="refresh"

来更改您的 span 标签 
<span id="refresh" data-tooltip="Refresh" data-tooltip-stickto="right" data-tooltip-color="bamboo" data-tooltip-animate-function="foldin">refresh</span>

工作 fiddle - https://jsfiddle.net/Lcrgohvg/

关于javascript - 如何创建自定义工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36136623/

40 4 0
文章推荐： javascript - 停止在 designMode = "on"的文档内编辑某些元素；
文章推荐： javascript - 在 jQuery 中使用克隆方法时摆脱文本框的 Value 属性
文章推荐： javascript - 如何在iPhone应用程序中集成javascript？
文章推荐： html - css 剪辑路径动画在悬停时触发
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com