javascript - funciona - Cómo agregar una información sobre herramientas a un div
ejecutar javascript despues de cargar pagina (25)
Tengo una etiqueta div de la siguiente manera:
<html>
<head></head>
<body>
<div>
<label>Name</label>
<input type="text"/>
</div>
</body>
</html>
Ahora quiero un javascript simple para mostrar información sobre herramientas en: hover the div. ¿Puede alguien ayudarme? La información sobre herramientas también debe tener un efecto de atenuación de entrada / salida.
Tooltips Position 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>
¿Qué hay de esto? El código lo siento no está optimizado porque tengo prisa, pero supongo que obtendrás la idea:
http://jsfiddle.net/prollygeek/1b0Lrr8d/
//Auxiliary functions
function createToolTip(divName,tips)
{
document.getElementById(divName).innerHTML+=''<div class="tooltip">''+tips+''</div>''
}
function removeToolTip(divName)
{
document.getElementById(divName).removeChild( document.getElementById(divName).getElementsByClassName("tooltip")[0])
}
function Tooltip(divName,tips)
{
document.getElementById(divName).onmouseover=function(){createToolTip(divName,tips)}
document.getElementById(divName).onmouseout=function(){removeToolTip(divName)}
}
//Sample Usage
Tooltip("mydiv","hello im a tip div")
Aquí hay una buena sugerencia de jQuery:
Para implementar esto, solo sigue estos pasos:
Agregue este código en sus etiquetas
<head></head>:<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>En los elementos HTML que desea que tengan la información sobre herramientas, solo agregue un atributo de
title. Cualquier texto que esté en el atributo del título estará en la información sobre herramientas.
Nota: cuando JavaScript está deshabilitado, retrocederá a la información sobre herramientas predeterminada del navegador / sistema operativo.
Aquí hay una implementación pura de CSS 3 (con JS opcional)
Lo único que tienes que hacer es establecer un atributo en cualquier div llamado "información sobre herramientas de datos" y ese texto se mostrará al lado cuando pases el cursor sobre él.
He incluido algún JavaScript opcional que hará que la información sobre herramientas se muestre cerca del cursor. Si no necesita esta función, puede ignorar de forma segura la parte de JavaScript de este violín.
Si no desea la aparición gradual en el estado de desplazamiento, simplemente elimine las propiedades de transición .
Tiene el estilo de la descripción del title propiedad. Aquí está el JSFiddle: http://jsfiddle.net/toe0hcyn/1/
Ejemplo 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 cambiar la ubicación de la información sobre herramientas basada en la posición del 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 }''
}
Aquí hay una implementación de información sobre herramientas simple que tiene en cuenta la posición de su mouse, así como la altura y el ancho de su ventana:
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>.
(ver también este violín )
Bien, aquí están todos tus requisitos de recompensa cumplidos:
- No jQuery
- Aparición instantánea
- No desaparece hasta que el ratón abandona la zona.
- Fade in / out efecto incorporado
- Y por último ... solución simple.
Aquí hay una demostración y un enlace a mi código (JSFiddle)
Aquí están las características que he incorporado en este violín puramente JS, CSS y HTML5:
- Puede configurar la velocidad del fundido.
- Puede configurar el texto de la información sobre herramientas con una variable simple.
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);
Hay muchas respuestas a esta pregunta, pero todavía puede ser que ayude a alguien. Es para todas las posiciones izquierda, derecha, superior, inferior.
Aquí está el 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;
}
Y la etiqueta HTML puede ser así:
<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>
He desarrollado tres tipos de efectos de desvanecimiento:
/* 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>
Hice algo que debería poder adaptarse también a un 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 una discusión más profunda, vea mi post:
Un simple texto de información sobre herramientas formateado al pasar el cursor.
La forma más sencilla sería establecer position: relative en el elemento que contiene y position: absolute en el elemento de información sobre herramientas dentro del contenedor para hacerlo flotar en relación con el elemento principal (elemento que contiene). Por ejemplo:
<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>
No necesitas JavaScript para esto en absoluto; acaba de establecer el atributo del title :
<html><head></head>
<body>
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>
</body>
</html>
Tenga en cuenta que la presentación visual de la información sobre herramientas depende del navegador / sistema operativo, por lo que podría desvanecerse y podría no hacerlo. Sin embargo, esta es la forma semántica de hacer información sobre herramientas, y funcionará correctamente con software de accesibilidad como lectores de pantalla.
Ver:
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>
Para la descripción básica, desea:
<div title="This is my tooltip">
Para una versión de javascript más sofisticada, puedes mirar en:
http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632
El enlace anterior le da 12 opciones para información sobre herramientas.
Prueba esto. Puede hacerlo solo con css y solo he agregado el atributo de data-title para la información sobre herramientas.
.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>
Puede crear información sobre herramientas CSS personalizada utilizando un atributo de datos, pseudo elementos y content: attr() por ejemplo.
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;
}
Puedes hacer información sobre herramientas usando CSS puro. Prueba este. Espero que te ayude a resolver tu 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;
}
Puedes hacerlo con un simple css ... jsfiddle aquí puedes ver el ejemplo
debajo del código css para información sobre herramientas
[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;
}
Puedes probar la información sobre herramientas de arranque.
$(function () {
$(''[data-toggle="tooltip"]'').tooltip()
})
leer más here
Puedes usar el título. Funcionará para casi todo
<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">
solo piense en cualquier etiqueta que pueda ser visible en la ventana html e inserte un title="whatever tooltip you''d like" dentro de su etiqueta y se obtuvo una información sobre herramientas.
Se puede hacer solo con CSS , sin javascript: demo en ejecución
Aplicar un atributo HTML personalizado, por ejemplo.
tooltip="bla bla"a tu objeto (div o lo que sea):<div tooltip="bla bla"> something here </div>Defina
:beforepseudoelemento de cada objeto[tooltip]para ser transparente, posicionado absolutamente y con latooltip=""sobretooltip=""valor como contenido:[tooltip]:before { position : absolute; content : attr(tooltip); opacity : 0; }Defina
:hover:beforepasar el estado de cada[tooltip]para hacerlo visible:[tooltip]:hover:before { opacity : 1; }Aplique sus estilos (color, tamaño, posición, etc.) al objeto de información sobre herramientas; fin de la historia.
En la demostración, he definido otra regla para especificar si la información sobre herramientas debe desaparecer cuando se desplaza sobre ella pero fuera del padre, con otro atributo personalizado, tooltip-persistent y una regla simple:
[tooltip]:not([tooltip-persistent]):before {
pointer-events: none;
}
Nota 1: la cobertura del navegador para esto es muy amplia, pero considere usar un respaldo de JavaScript (si es necesario) para el IE antiguo.
Nota 2: una mejora puede estar agregando un poco de javascript para calcular la posición del mouse y agregarlo a los pseudo elementos, cambiando una clase aplicada a él.
También puedes usar esto como información sobre herramientas ... Funciona igual, pero tienes que escribir una etiqueta adicional.
<abbr title="THis is tooltip"></abbr>
Una solución solo para CSS3 podría 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>
Luego podría crear un div de tooltip-2 la misma manera ... por supuesto, también puede usar el atributo de title lugar del atributo de data .
Y mi version
.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;
}
Entonces el HTML
<div title="This is some information for our tooltip." class="tooltip">bar </div>
Sin usar ninguna API También puedes hacer algo como esto usando CSS puro y 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'');
});
<!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>
También puede personalizar el estilo de información sobre herramientas. Consulte este enlace: http://jqueryui.com/tooltip/#custom-style
<div title="tooltip text..">
Your Text....
</div>
Más simple forma de agregar información sobre herramientas a su elemento div.