向div添加工具提示

我有一个这样的div标签:

<div>
  <label>Name</label>
  <input type="text"/>
</div>

我如何显示一个工具提示:div的悬停，最好有一个淡入/淡出效果。

当前回答

您可以尝试引导工具提示。

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

进一步阅读

2017-11-22 09:12:15

其他回答

您可以尝试引导工具提示。

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

进一步阅读

2017-11-22 09:12:15

这个问题有很多答案，但它仍然可能会帮助到一些人。它适用于所有左、右、上、下位置。

下面是css:

    .m-tb-5 {
        margin-top: 2px;
        margin-bottom: 2px;
    }
    [data-tooltip] {
        display: inline-block;
        position: relative;
        cursor: help;
        padding: 3px;
    }
    /* Tooltip styling */
    [data-tooltip]:before {
        content: attr(data-tooltip);
        display: none;
        position: absolute;
        background: #000;
        color: #fff;
        padding: 3px 6px;
        font-size: 10px;
        line-height: 1.4;
        min-width: 100px;
        text-align: center;
        border-radius: 4px;
    }
    /* Dynamic horizontal centering */
    [data-tooltip-position="top"]:before,
    [data-tooltip-position="bottom"]:before {
        left: 50%;
        -ms-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    /* Dynamic vertical centering */
    [data-tooltip-position="right"]:before,
    [data-tooltip-position="left"]:before {
        top: 50%;
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    [data-tooltip-position="top"]:before {
        bottom: 100%;
        margin-bottom: 6px;
    }
    [data-tooltip-position="right"]:before {
        left: 100%;
        margin-left: 6px;
    }
    [data-tooltip-position="bottom"]:before {
        top: 100%;
        margin-top: 6px;
    }
    [data-tooltip-position="left"]:before {
        right: 100%;
        margin-right: 6px;
    }

    /* Tooltip arrow styling/placement */
    [data-tooltip]:after {
        content: '';
        display: none;
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
    }
    /* Dynamic horizontal centering for the tooltip */
    [data-tooltip-position="top"]:after,
    [data-tooltip-position="bottom"]:after {
        left: 50%;
        margin-left: -6px;
    }
    /* Dynamic vertical centering for the tooltip */
    [data-tooltip-position="right"]:after,
    [data-tooltip-position="left"]:after {
        top: 50%;
        margin-top: -6px;
    }
    [data-tooltip-position="top"]:after {
        bottom: 100%;
        border-width: 6px 6px 0;
        border-top-color: #000;
    }
    [data-tooltip-position="right"]:after {
        left: 100%;
        border-width: 6px 6px 6px 0;
        border-right-color: #000;
    }

    [data-tooltip-position="left"]:after {
        right: 100%;
        border-width: 6px 0 6px 6px;
        border-left-color: #000;
    }
    /* Show the tooltip when hovering */
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after {
        display: block;
        z-index: 50;
    }

HTML标签可以是这样的:

<p data-tooltip-position="right" data-tooltip="Some tooltip text here" title=" > text here </p> .

<p data-tooltip-position="left" data-tooltip="Some tooltip text here" title=" > text here </p> .

<p data-tooltip-position="top" data-tooltip="Some tooltip text here" title=" > text here </p> .

<p data-tooltip-position="bottom" data-tooltip="Some tooltip text here" title=" > text here </p> .

2017-03-24 07:02:07

试试这个。你可以这样做，只有css和我只添加了数据标题属性的工具提示。

.tooltip { 位置:相对; 显示:inline-block; ｝ .tooltip [data-title]:徘徊:{后内容:attr (data-title); 填充:4px 8px; 颜色:# fff; 位置:绝对的; 左:0; 上图:110%; 空白:nowrap;} border - radius: 5 px; 背景:# 000; ｝ <div data-title="My tooltip" class="tooltip"> < >标签名称> < /标签 < input type = " text " / > < / div >

2017-11-20 04:11:08

这是一个漂亮的jQuery工具提示:

https://jqueryui.com/tooltip/

要实现这一点，只需遵循以下步骤:

Add this code in your <head></head> tags: <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script> <script type="text/javascript"> $("[title]").tooltip(); </script> <style type="text/css"> /* tooltip styling. by default the element to be styled is .tooltip */ .tooltip { display:none; background:transparent url(https://dl.dropboxusercontent.com/u/25819920/tooltip/black_arrow.png); font-size:12px; height:70px; width:160px; padding:25px; color:#fff; } </style> On the HTML elements that you want to have the tooltip, just add a title attribute to it. Whatever text is in the title attribute will be in the tooltip.

注意:当JavaScript被禁用时，它将回退到默认的浏览器/操作系统工具提示。

2011-08-19 05:15:33

你可以像这样在onmouseover和onmouseout期间切换子div:

function Tooltip(el, text) {
  el.onmouseover = function() {
    el.innerHTML += '<div class="tooltip">' + text + '</div>' 
    }
  el.onmouseout = function() {
    el.removeChild(el.querySelector(".tooltip"))
  }
}

//Sample Usage
Tooltip(document.getElementById("mydiv"),"hello im a tip div")

Stack Snippets & jsFiddle中的例子

2014-09-11 04:51:17

向div添加工具提示

推荐文章

最新文章

标签