Adicionar uma dica de ferramenta a uma div

568

Eu tenho uma tag div assim:

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

Como posso exibir uma dica de ferramenta na :hoverdiv, de preferência com um efeito fade in / out.

javascript html css tooltip user475685
fonte
2
Para uma solução JavaScript CSS simples +, eu não acho que você pode bater pós Daniel IMMS' em stackoverflow.com/questions/15702867/...
Rick Hitchcock
1
Somente CSS3
Andrea Ligios
stackoverflow.com/questions/36275678/…
Pooja Kedar

Respostas:

896

Para a dica de ferramenta básica, você deseja:

<div title="This is my tooltip">

Para uma versão javascript mais sofisticada, você pode procurar:

https://jqueryhouse.com/best-jquery-tooltip-plugins/

O link acima fornece 25 opções para dicas de ferramentas.

sscirrus
fonte
2
Uma coisa a observar com uma dica de ferramenta de título é se o usuário clicar na sua div, a dica de ferramenta não aparecerá. Isso pode ser muito frustrante ... especialmente se sua div parecer ser clicada. por exemplo: style = "cursor: ponteiro;"
RayLoveless
2
@RayL Não é um comportamento padrão que uma dica de ferramenta seja clicável - isso desfoca os links e as dicas de ferramenta, impedindo que o usuário saiba se uma palavra destacada 1) fornecerá mais informações ou 2) levará totalmente para outra página. Em geral, más práticas.
Sscirrus
@sscirrus Eu concordo. É por isso que você NÃO deve estilizar suas dicas com "cursor: ponteiro;" (incentiva o clique), que vejo com muita frequência.
precisa saber é o seguinte
18
Se você deseja mostrar apenas uma dica de ferramenta para algum pedaço de texto, como "detalhes" para alguma palavra-chave ou algo parecido, use <abbr title="...">...</abbr>; Os navegadores geralmente estilizam isso sublinhado com traços / pontos, indicando "há mais para contar, veja minha dica de ferramenta".
precisa saber é
2
No Chrome, pode levar alguns segundos para que a dica de ferramenta apareça. Meio lento na minha opinião.
AndroidDev 30/05
292

Isso pode ser feito com apenas CSS , sem javascript em tudo : em execução de demonstração

  1. Aplique um atributo HTML personalizado, por exemplo. data-tooltip="bla bla"ao seu objeto (div ou qualquer outra coisa):

    <div data-tooltip="bla bla">
    something here
</div>

  2. Defina o :beforepseudoelemento de cada [data-tooltip]objeto como transparente, absolutamente posicionado e com data-tooltip=""valor como conteúdo:

    [data-tooltip]:before {            
    position : absolute;
     content : attr(data-tooltip);
     opacity : 0;
}

  3. Defina o :hover:beforeestado flutuante de cada um [data-tooltip]para torná-lo visível:

    [data-tooltip]:hover:before {        
    opacity : 1;
}

  4. Aplique seus estilos (cor, tamanho, posição etc.) ao objeto dica de ferramenta; fim da história.

Na demonstração, defini outra regra para especificar se a dica de ferramenta deve desaparecer ao passar o mouse sobre ela, mas fora do pai, com outro atributo personalizado data-tooltip-persistente uma regra simples:

[data-tooltip]:not([data-tooltip-persistent]):before {
    pointer-events: none;
}

Nota 1: a cobertura do navegador é muito ampla, mas considere usar um fallback de javascript (se necessário) para o IE antigo.

Nota 2: um aprimoramento pode incluir um pouco de javascript para calcular a posição do mouse e adicioná-lo aos pseudo-elementos, alterando uma classe aplicada a ele.

Andrea Ligios
fonte
1
@AndreaLigios Isso pode ser alterado, para que a dica de ferramenta seja redimensionada para 1x1px quando não mostrada e esse pixel esteja em algum lugar nas coordenadas 0,0 do texto? Atualmente, há uma falha na demonstração: ao colocar o mouse na área abaixo da terceira div da demonstração, a dica de ferramenta começa a aparecer, mas depois se afasta do ponteiro do mouse e volta à sua posição inicial, que novamente engana a aparição. Isso está acontecendo incrivelmente rápido e mostra uma tremulação.
John John
1
Ótima resposta Andrea, a resposta aceita está desatualizada. O jsfiddle ajudou bastante.
Jhhoff02 # 4/16
2
Eu amo que existem duas ótimas respostas para essa pergunta. Um simples e o outro personalizável.
Rohmer
2
Isso é incrível! Mas: como podemos adicionar uma quebra de linha aqui? Parece ignorar <br>e outros como \nou \rcomo esses aparecem apenas como texto sem formatação no restante da string. Atualização: Acabei de notar que definir uma largura máxima faz com que ajuste automaticamente seu conteúdo e coloque quebras de linha. Realmente arrumado! (No entanto, se alguém souber uma resposta, eu ainda apreciar que)
LinusGeffarth
2
@LinusGeffarth, você pode fazer isso com espaço em branco: pré-embrulhar; no Chrome atual. Ainda não testei outros navegadores.
Taugenichts
83

Você não precisa de JavaScript para isso; basta definir o titleatributo :

<div title="Hello, World!">
  <label>Name</label>
  <input type="text"/>
</div>

Observe que a apresentação visual da dica de ferramenta depende do navegador / SO, portanto, pode aparecer e não aparecer. No entanto, esta é a maneira semântica de executar dicas de ferramentas e funcionará corretamente com softwares de acessibilidade como leitores de tela.

Demonstração em snippets de pilha

<div title="Hello, World!">
  <label>Name</label>
  <input type="text"/>
</div>
Expandir snippet

cdhowie
fonte
verdade, mas se o OP quer estilo a dica de alguma forma, em seguida, uma implementação CSS é melhor
Yvonne Aburrow
2
@YvonneAburrow Esta resposta não é apenas para o OP.
Cdhowie #
justo. Mas, às vezes, é preciso escrever um ensaio em uma dica de ferramenta e, nessa situação, o titleatributo simplesmente não é suficiente.
Yvonne Aburrow
@YvonneAburrow ... É por isso que existem várias respostas votadas. Se você precisar de algo simples e rápido, titlefunciona. Existem outras respostas que são mais complexas se você precisar de algo mais complexo. Sinceramente, não tenho certeza de que argumento você está tentando fazer aqui.
Cdhowie # 22/17
17

Aqui está uma boa dica de ferramenta do jQuery:

https://jqueryui.com/tooltip/

Para implementar isso, basta seguir estas etapas:

  1. Adicione este código nas suas <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>

  2. Nos elementos HTML que você deseja que a dica de ferramenta, basta adicionar um titleatributo a ela. Qualquer texto que esteja no atributo title estará na dica de ferramenta.

Nota: Quando o JavaScript estiver desativado, ele retornará à dica de ferramenta padrão do navegador / sistema operacional.

Nathan
fonte
16

Fiz algo que também deveria ser adaptado a uma div.

HTML

<td>
    <%# (Eval("Name").ToString().Length > 65) ? Eval("Name").ToString().Substring(0, 60) + "..." : Eval("Name")%>
    <span class="showonhover">
        <a href="#"><%# (Eval("Name").ToString().Length > 65) ? "More" : "" %></a>
        <span class="hovertext">
            <%# Eval("Name") %>
        </span>
    </span>
</td>

CSS

.showonhover .hovertext { display: none;}
.showonhover:hover .hovertext {display: inline;}
a.viewdescription {color:#999;}
a.viewdescription:hover {background-color:#999; color: White;}
.hovertext {position:absolute;z-index:1000;border:1px solid #ffd971;background-color:#fffdce;padding:11px;width:150px;font-size: 0.75em;}

Para uma discussão mais aprofundada, veja meu post:

Um simples texto de ToolTip formatado ao passar o mouse

Narnian
fonte
8
A pergunta era para uma solução html e não para alguma mágica do lado do servidor .net.
Michał Šrajer
5
O código .net está lá para mostrar o truncamento. A abordagem usando html e css ainda é válida.
precisa saber é o seguinte
1
Essa é a melhor e mais fácil solução, pois não depende do JS. Apenas torne o span.showonhover focalizável ou mova o span.hovertext para o link e você estará totalmente acessível para os leitores de tela (e, portanto, melhor que a solução de atributo de título). Oh, e esquecer <% # ...%>
chaenu
15

Aqui está uma implementação pura do CSS 3 (com JS opcional)

A única coisa que você precisa fazer é definir um atributo em qualquer div chamada "dica de ferramenta de dados" e esse texto será exibido ao lado dele quando você passar o mouse sobre ele.

Incluímos JavaScript opcional que fará com que a dica de ferramenta seja exibida perto do cursor. Se você não precisar desse recurso, poderá ignorar com segurança a parte JavaScript deste violino.

Se você não deseja que o fade-in fique no estado de foco, remova as propriedades de transição .

É estilizado como a titledica de ferramenta da propriedade. Aqui está o JSFiddle: http://jsfiddle.net/toe0hcyn/1/

Exemplo HTML:

<div data-tooltip="your tooltip message"></div>

CSS:

*[data-tooltip] {
    position: relative;
}

*[data-tooltip]::after {
    content: attr(data-tooltip);

    position: absolute;
    top: -20px;
    right: -20px;
    width: 150px;

    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;

    display: block;
    font-size: 12px;
    line-height: 16px;
    background: #fefdcd;
    padding: 2px 2px;
    border: 1px solid #c0c0c0;
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.4);
}

*[data-tooltip]:hover::after {
    opacity: 1;
}

JavaScript opcional para alteração do local da dica de ferramenta com base na posição do mouse:

var style = document.createElement('style');
document.head.appendChild(style);

var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++) {
    var attr = allElements[i].getAttribute('data-tooltip');
    if (attr) {
        allElements[i].addEventListener('mouseover', hoverEvent);
    }
}

function hoverEvent(event) {
    event.preventDefault();
    x = event.x - this.offsetLeft;
    y = event.y - this.offsetTop;

    // Make it hang below the cursor a bit.
    y += 10;

    style.innerHTML = '*[data-tooltip]::after { left: ' + x + 'px; top: ' + y + 'px  }'

}
Steven Linn
fonte
12

Ok, aqui estão todos os seus requisitos de recompensa atendidos:

  • Sem jQuery
  • Aparecimento instantâneo
  • Não desaparece até que o mouse saia da área
  • Efeito Fade in / out incorporado
  • E por último .. solução simples

Aqui está uma demonstração e um link para o meu código (JSFiddle)

Aqui estão os recursos que eu incorporei neste violino JS, CSS e HTML5:

  • Você pode definir a velocidade do desbotamento.
  • Você pode definir o texto da dica de ferramenta com uma variável simples.

HTML:

<div id="wrapper">
    <div id="a">Hover over this div to see a cool tool tip!</div>
</div>

CSS:

#a{
    background-color:yellow;
    padding:10px;
    border:2px solid red;    
}

.tooltip{
    background:black;
    color:white;
    padding:5px;
    box-shadow:0 0 10px 0 rgba(0, 0, 0, 1);
    border-radius:10px;
    opacity:0;
}

JavaScript:

var div = document.getElementById('wrapper');
var a = document.getElementById("a");
var fadeSpeed = 25; // a value between 1 and 1000 where 1000 will take 10
                    // seconds to fade in and out and 1 will take 0.01 sec.
var tipMessage = "The content of the tooltip...";

var showTip = function(){    
    var tip = document.createElement("span");
    tip.className = "tooltip";
    tip.id = "tip";
    tip.innerHTML = tipMessage;
    div.appendChild(tip);
    tip.style.opacity="0"; // to start with...
    var intId = setInterval(function(){
        newOpacity = parseFloat(tip.style.opacity)+0.1;
        tip.style.opacity = newOpacity.toString();
        if(tip.style.opacity == "1"){
            clearInterval(intId);
        }
    }, fadeSpeed);
};
var hideTip = function(){
    var tip = document.getElementById("tip");
    var intId = setInterval(function(){
        newOpacity = parseFloat(tip.style.opacity)-0.1;
        tip.style.opacity = newOpacity.toString();
        if(tip.style.opacity == "0"){
            clearInterval(intId);
            tip.remove();
        }
    }, fadeSpeed);
    tip.remove();
};

a.addEventListener("mouseover", showTip, false);
a.addEventListener("mouseout", hideTip, false);
Anshu Dwibhashi
fonte
Mover rapidamente o cursor para dentro e para fora gera várias dicas de ferramentas que não desaparecem no seu jsfiddle.
21430 Keith Vin Ke
Será que a dica de ferramenta aparece na posição do mouse? Ótima personalização.
Andre Mesquita
5

Você pode criar dicas de ferramentas CSS personalizadas usando um atributo de dados, pseudo-elementos e content: attr()por exemplo.

http://jsfiddle.net/clintioo/gLeydk0k/11/

<div data-tooltip="This is my tooltip">
    <label>Name</label>
    <input type="text" />
</div>

. 

div:hover:before {
    content: attr(data-tooltip);
    position: absolute;
    padding: 5px 10px;
    margin: -3px 0 0 180px;
    background: orange;
    color: white;
    border-radius: 3px;
}

div:hover:after {
    content: '';
    position: absolute;
    margin: 6px 0 0 3px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 10px solid orange;
    border-bottom: 5px solid transparent;
}

input[type="text"] {
    width: 125px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
Clint Brown
fonte
4

A maneira mais simples seria definir position: relativeo elemento que contém e position: absoluteo elemento de dica de ferramenta dentro do contêiner para fazê-lo flutuar em relação ao pai (elemento que contém). Por exemplo:

<div style="background: yellow;">
    <div style="display: inline-block; position: relative; background: pink;">
        <label>Name</label>
        <input type="text" />

        <div style="background: #e5e5e5; position: absolute; top: -10px; left: 0; right: 0;">
            Tooltip text
        </div>
    </div>
</div>
designcise
fonte
4

Você pode usar o título. funcionará para quase tudo

<div title="Great for making new friends through cooperation.">

<input script=JavaScript type=button title="Click for a compliment" onclick="window.alert('Your hair reminds me of a sunset across a prairie')" value="making you happy">

<table title="Great job working for those who understand the way i feel">

pense em qualquer tag que possa ser visível na janela html e insira uma title="whatever tooltip you'd like"tag interna e você terá uma dica de ferramenta.

Ronnie Matthews
fonte
Não entendo por que você recebeu tão pouco número de votos. Eu tinha certeza de que existe uma solução simples, mas as pessoas e as escolas w3s escolhem soluções complexas para uma coisa tão simples. obrigado.
schlingel 10/09/19
4

Você pode alternar uma div filho durante onmouseovere onmouseoutassim:

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")

Exemplo em Snippets de pilha e jsFiddle

Mostrar snippet de código

ProllyGeek
fonte
3 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI tooltip</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>  
  <script>
  $(function() {
    $("#tooltip").tooltip();
  });
  </script>
</head>
<body>
<div id="tooltip" title="I am tooltip">mouse over me</div>
</body>
</html>

Você também pode personalizar o estilo da dica de ferramenta. Consulte este link: http://jqueryui.com/tooltip/#custom-style

Sanman
fonte
3

Uma solução apenas para CSS3 pode ser:

CSS3: 

div[id^="tooltip"]:after {content: attr(data-title); background: #e5e5e5; position: absolute; top: -10px; left:  0; right: 0; z-index: 1000;}

HTML5:

<div style="background: yellow;">
    <div id="tooltip-1" data-title="Tooltip Text" style="display: inline-block; position: relative; background: pink;">
        <label>Name</label>
        <input type="text" />
    </div>
</div>

Você pode criar uma tooltip-2div da mesma maneira ... é claro, também pode usar o titleatributo em vez do dataatributo.

designcise
fonte
1
Por que diabos você usaria um id para estilizar algo de que deseja mais instâncias e, em seguida, usaria o [id^=tooltip]seletor quando poderia ter usado apenas uma classe e .tooltip?
23914 Stephan Muller
Você está certo. Comecei com ids, então o segui e perdi totalmente. Mas ei, alguém pode se beneficiar disso. Oh e pela maneira, poderíamos até usar um seletor de atributo para essa matéria para selecionar "data-título" (por exemplo, div[data-title])sem ter que adicionar marcação extra.
designcise
3

Tente isso. Você pode fazer isso apenas com css e eu apenas adicionei data-titleatributo para a dica de ferramenta.

.tooltip{
  position:relative;
  display: inline-block;
}
.tooltip[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #fff;
  position: absolute;
  left: 0;
  top: 110%;
  white-space: nowrap;  
  border-radius: 5px;  
  background:#000;
}
<div data-title="My tooltip" class="tooltip">
    <label>Name</label>
    <input type="text"/>
</div>
Expandir snippet

ankita patel
fonte
3

Eu desenvolvi três efeitos de desvanecimento do tipo:

/* setup tooltips */
    .tooltip {
      position: relative;
    }
    .tooltip:before,
    .tooltip:after {
      display: block;
      opacity: 0;
      pointer-events: none;
      position: absolute;
    }
    .tooltip:after {
    	border-right: 6px solid transparent;
    	border-bottom: 6px solid rgba(0,0,0,.75); 
      border-left: 6px solid transparent;
      content: '';
      height: 0;
        top: 20px;
        left: 20px;
      width: 0;
    }
    .tooltip:before {
      background: rgba(0,0,0,.75);
      border-radius: 2px;
      color: #fff;
      content: attr(data-title);
      font-size: 14px;
      padding: 6px 10px;
        top: 26px;
      white-space: nowrap;
    }

    /* the animations */
    /* fade */
    .tooltip.fade:after,
    .tooltip.fade:before {
      transform: translate3d(0,-10px,0);
      transition: all .15s ease-in-out;
    }
    .tooltip.fade:hover:after,
    .tooltip.fade:hover:before {
      opacity: 1;
      transform: translate3d(0,0,0);
    }

    /* expand */
    .tooltip.expand:before {
      transform: scale3d(.2,.2,1);
      transition: all .2s ease-in-out;
    }
    .tooltip.expand:after {
      transform: translate3d(0,6px,0);
      transition: all .1s ease-in-out;
    }
    .tooltip.expand:hover:before,
    .tooltip.expand:hover:after {
      opacity: 1;
      transform: scale3d(1,1,1);
    }
    .tooltip.expand:hover:after {
      transition: all .2s .1s ease-in-out;
    }

    /* swing */
    .tooltip.swing:before,
    .tooltip.swing:after {
      transform: translate3d(0,30px,0) rotate3d(0,0,1,60deg);
      transform-origin: 0 0;
      transition: transform .15s ease-in-out, opacity .2s;
    }
    .tooltip.swing:after {
      transform: translate3d(0,60px,0);
      transition: transform .15s ease-in-out, opacity .2s;
    }
    .tooltip.swing:hover:before,
    .tooltip.swing:hover:after {
      opacity: 1;
      transform: translate3d(0,0,0) rotate3d(1,1,1,0deg);
    }

    /* basic styling: has nothing to do with tooltips: */
    h1 {
      padding-left: 50px;
    }
    ul {
      margin-bottom: 40px;
    }
    li {
      cursor: pointer; 
      display: inline-block; 
      padding: 0 10px;
    }
 <h1>FADE</h1>

      <div class="tooltip fade" data-title="Hypertext Markup Language">
      <label>Name</label>
      <input type="text"/>
      </div>
      

    <h1>EXPAND</h1>

      <div class="tooltip expand" data-title="Hypertext Markup Language">
      <label>Name</label>
      <input type="text"/>
      </div>
      

    <h1>SWING</h1>

      <div class="tooltip swing" data-title="Hypertext Markup Language"> 
      <label>Name</label>
      <input type="text"/>
      </div>
Expandir snippet

Nims Patel
fonte
3

Aqui está uma implementação simples de dica de ferramenta que leva em consideração a posição do mouse e a altura e largura da janela:

function showTooltip(e) {
  var tooltip = e.target.classList.contains("tooltip")
      ? e.target
      : e.target.querySelector(":scope .tooltip");
  tooltip.style.left =
      (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
          ? (e.pageX + 10 + "px")
          : (document.body.clientWidth + 5 - tooltip.clientWidth + "px");
  tooltip.style.top =
      (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
          ? (e.pageY + 10 + "px")
          : (document.body.clientHeight + 5 - tooltip.clientHeight + "px");
}

var tooltips = document.querySelectorAll('.couponcode');
for(var i = 0; i < tooltips.length; i++) {
  tooltips[i].addEventListener('mousemove', showTooltip);
}
.couponcode {
    color: red;
    cursor: pointer;
}

.couponcode:hover .tooltip {
    display: block;
}

.tooltip {
    position: absolute;
    white-space: nowrap;
    display: none;
    background: #ffffcc;
    border: 1px solid black;
    padding: 5px;
    z-index: 1000;
    color: black;
}
Lorem ipsum dolor sit amet, <span class="couponcode">consectetur
adipiscing<span class="tooltip">This is a tooltip</span></span>
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span
class="couponcode">reprehenderit<span class="tooltip">This is
another tooltip</span></span> in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est <span
class="couponcode">laborum<span class="tooltip">This is yet
another tooltip</span></span>.
Expandir snippet

(veja também este violino )

John Slegers
fonte
2

Sem usar nenhuma API Você também pode fazer algo assim usando CSS puro e Jquery Demo

HTML

<div class="pointer_tooltip"> 
    Click & Drag to draw the area
</div>

CSS

.pointer_tooltip{
  width : auto;
  height : auto;
  padding : 10px;
  border-radius : 5px;
  background-color : #fff;
  position: absolute;
}

Jquery

$(document).mousemove(function( event ) {
    var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";   

    //set the actuall width
    $('.pointer_tooltip').width($('.pointer_tooltip').width());
    var position_top = event.pageY+18;
    var position_left = event.pageX-60;          
    var width=$('body').width()-$('.pointer_tooltip').width();

    //check if left not minus
    if(position_left<0){
      position_left=10;
    }else if(position_left > width){
     position_left=width-10;
    }       


    $('.pointer_tooltip').css('top',position_top+'px');
    $('.pointer_tooltip').css('left',position_left+'px');
});
Amin Kodaganur
fonte
2

Você pode fazer uma dica de ferramenta usando CSS puro.Tente este.Espero que ele ajude você a resolver seu problema.

HTML

<div class="tooltip"> Name
    <span class="tooltiptext">Add your tooltip text here.</span>
</div>

CSS

.tooltip {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 270px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 1s;
    }

    .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }
Faisal
fonte
2

Dicas de ferramentas Posição css puro

      div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%); /* IE 9 */
        -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	
							
        text-align: center;
      }  					
	
      .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
      }

      .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        //text-align: center;
        border-radius: 6px;
        padding: 5px 0;

        /* Position the tooltip */
        position: absolute;
        z-index: 1;
      }

      .tooltip:hover .tooltiptext {
        visibility: visible;
      }		
					
      .toolLeft {
        top: -5px;
        right: 105%;
      }					
					
      .toolRight {
        top: -5px;
        left: 105%;
      }
					
      .toolTop {
        bottom: 100%;
        left: 50%;
        margin-left: -60px;
      }
					
      .toolBottom {
        top: 100%;
        left: 50%;
        margin-left: -60px;
      }
    <div>
			
      <div class="tooltip">Top <span class="tooltiptext toolTop">Tooltip text</span></div><br />
      <div class="tooltip">Left  <span class="tooltiptext toolLeft">Tooltip text</span></div><br />			
      <div class="tooltip">Right <span class="tooltiptext toolRight">Tooltip text</span></div><br />
      <div class="tooltip">Bottom  <span class="tooltiptext toolBottom">Tooltip text</span></div><br />			
			
    </div>
Expandir snippet

antelove
fonte
2

você pode fazer isso com css simples ... jsfiddleaqui você pode ver o exemplo

abaixo do código css da dica de ferramenta

[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
rota satyajit
fonte
1

Existem muitas respostas para essa pergunta, mas ainda assim pode ajudar alguém. É para todas as posições esquerda, direita, superior e inferior.

Aqui está o 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;
    }

E a tag HTML pode ser assim:

<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>

MJ
fonte
1

Você pode tentar dicas de ferramentas de autoinicialização.

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

mais leitura aqui

1inMillion
fonte
1

você também pode usar isso como dica de ferramenta ... Funciona da mesma forma, mas é necessário escrever uma tag extra.

<abbr title="THis is tooltip"></abbr>

fonte
1

E minha versão

.tooltip{
display: inline;
position: relative; /** very important set to relative*/
}

.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title); /**extract the content from the title */
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}

.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}

Então o HTML

<div title="This is some information for our tooltip." class="tooltip">bar </div>
Olubodun Agbalaya
fonte
1

Azle tem uma boa implementação. Digamos que meu elemento de destino seja um ícone, com o nome da classe "my_icon". Basta direcionar o elemento usando afunção add_tooltip do Azle:

az.add_tooltip('my_icon', 1, {
    "this_class" : "my_tooltip",
    "text" : "HELLO THERE!"
})

insira a descrição da imagem aqui

Você pode controlar a posição e o estilo da dica de ferramenta usando o estilo CSS usual . A dica de ferramenta acima tem o seguinte estilo:

az.style_tooltip('my_tooltip', 1, {
    "background" : "black",
    "margin-left" : "10px",
    "color" : "hotpink",
    "font-weight" : "bold",
    "font-family" : "Arial",
    "padding" : "10px",
    "border-radius" : "10px"
})

Também podemos adicionar uma imagem à dica de ferramenta, especificando um "caminho_da_imagem":

az.add_tooltip('my_icon', 1, {
    "this_class" : "my_tooltip",
    "text" : "HELLO THERE!",
    "image_path" : "https://cdn-images-1.medium.com/max/1874/1*toepgVwopga9TYFpSkSxXw.png",
    "image_class" : "my_image"
})

insira a descrição da imagem aqui

Como especificamos uma "image_class" acima, podemos estilizar a imagem usando a mesma função style_tooltip, desta vez visando a imagem. A imagem do jogo acima foi estilizada da seguinte maneira:

az.style_tooltip('my_image', 1, {
    "width" : "50px",
    "align" : "center"
})

Aqui está um exemplo usando uma imagem maior :

insira a descrição da imagem aqui

... adicionado e com o seguinte estilo:

az.add_tooltip('my_icon', 1, {
    "this_class" : "my_tooltip",
    "text" : "MORE INFO<br><br>",
    "image_path" : "https://i0.wp.com/proactive.ie/wp-content/uploads/2017/11/Infographic.jpg?resize=1240%2C1062&ssl=1",
    "image_class" : "my_image"
})

az.style_tooltip('my_image', 1, {
    "width" : "500px"
})

Aqui está um GIST do código inteiro.

Você pode brincar neste FIDDLE .

Cibernético
fonte
0

Adicionar dica de ferramenta a uma div

<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Information</span>
</div>
Love Kumar
fonte
Isso foi copiado e colado em w3schools.com/css/css_tooltip.asp
Mark Kortink 14/03
-1 
<div title="tooltip text..">
    Your Text....
</div>

Maneira mais simples de adicionar dica de ferramenta ao seu elemento div.

Kartik Arora
fonte
3
Desculpe, Kartik, a mesma coisa foi dita em várias respostas e comentários. Sua contribuição não adiciona nada :(
brasofilo 23/11