Atrybut tytułu pojawia się natychmiast po najechaniu myszą

Question

czy istnieje możliwość nadania atrybutowi tytułu znacznika zakotwiczenia natychmiast po najechaniu myszą nie po sekundach. Każde rozwiązanie w JavaScript/jQuery i CSS jest dobre.

Answer 1

Wtyczka Bootstraps ToolTip radzi sobie całkiem nieźle i jest znacznie bardziej responsywna/szybsza.

Wystarczy uruchomić domyślne pliki Bootstrap.

CSS można zmienić zgodnie z własnymi wymaganiami.

Więcej informacji oraz przykłady mogą być pokazane tutaj:

http://getbootstrap.com/javascript/#tooltips

Answer 2

Nie można zrobić z domyślnymi podpowiedzi, ale można użyć wtyczek jQuery dla podpowiedzi lub bootstrap. a najlepszym sposobem na stworzenie tego jest stworzenie niestandardowej podpowiedzi.

http://tech.pro/tutorial/930/jquery-custom-tooltips

Oto niektóre odnośniki, które można wykorzystać

Simpletip: http://craigsworks.com/projects/simpletip/

Bootstrap: http://getbootstrap.com/javascript/#tooltips

Answer 3

Można ukryć tite na mouseover i dołączyć rozpiętość. następnie wyjąć rozpiętości i przywrócić tytuł na mouseout

$('a').hover(function(e){ 
    title = $(this).attr('title'); 
    $(this).append('<span>Im Super Fast!!!</span>') 
    $(this).removeAttr('title'); 
}, 
function(e){ 
    $('span', this).remove(); 
    $(this).attr('title',title); 
}); 

sprawdzić przykład - http://jsfiddle.net/1z3catx3/1/

Uwaga: Można by oczywiście trzeba projektować z span

Answer 4

Jedno podejście:

// textFrom : String, the attribute from which the text 
 
//   should come, 
 
// delta : String or Number, the distance from the cursor at 
 
//   which the tooltip should appear 
 
function instantTooltips(textFrom, delta) { 
 
    // if delta exists, and can be parsed to a number, we use it, 
 
    // otherwise we use the default of 5: 
 
    delta = parseFloat(delta) ? parseFloat(delta) : 5; 
 

 
    // function to handle repositioning of the created tooltip: 
 
    function reposition(e) { 
 
    // get the tooltip element: 
 
    var tooltip = this.nextSibling; 
 
    // setting the position according to the position of the 
 
    // pointer: 
 
    tooltip.style.top = (e.pageY + delta) + 'px'; 
 
    tooltip.style.left = (e.pageX + delta) + 'px'; 
 
    } 
 

 
    // get all elements that have an attribute from which we 
 
    // want to get the tooltip text from: 
 
    var toTitle = document.querySelectorAll('[' + textFrom + ']'), 
 
    //create a span element: 
 
    span = document.createElement('span'), 
 
    // find if we should use textContent or innerText (IE): 
 
    textProp = 'textContent' in document ? 'textContent' : 'innerText', 
 
    // caching variables for use in the upcoming forEach: 
 
    parent, spanClone; 
 
    // adding a class-name (for CSS styling): 
 
    span.classList.add('createdTooltip'); 
 
    // iterating over each of the elements with a title attribute: 
 
    [].forEach.call(toTitle, function(elem) { 
 
    // reference to the element's parentNode: 
 
    parent = elem.parentNode; 
 
    // cloning the span, to avoid creating multiple elements: 
 
    spanClone = span.cloneNode(); 
 
    // setting the text of the cloned span to the text 
 
    // of the attribute from which the text should be taken: 
 
    spanClone[textProp] = elem.getAttribute(textFrom); 
 

 
    // inserting the created/cloned span into the 
 
    // document, after the element: 
 
    parent.insertBefore(spanClone, elem.nextSibling); 
 

 
    // binding the reposition function to the mousemove 
 
    // event: 
 
    elem.addEventListener('mousemove', reposition); 
 

 
    // we're setting textFrom attribute to an empty string 
 
    // so that the CSS will still apply, but which 
 
    // shouldl still not be shown by the browser: 
 
    elem.setAttribute(textFrom, ''); 
 
    }); 
 
} 
 

 
// calling the function: 
 
instantTooltips('title', 15);

[title] { 
 
    display: block; 
 
    margin: 0 0 1em 0; 
 
} 
 

 
/* 
 
    hiding, and styling, the elements we'll be creating 
 
*/ 
 
[title] + span.createdTooltip { 
 
    display: none; 
 
    border: 2px solid #f90; 
 
    background-color: rgba(255, 255, 255, 0.8); 
 
    padding: 0.2em 0.5em; 
 
    border-radius: 0.75em; 
 
} 
 

 
/* 
 
    showing the created elements on hovering the element we want to 
 
    show tooltips for 
 
*/ 
 
[title]:hover + span.createdTooltip { 
 
    display: block; 
 
    position: absolute; 
 
}

<span title="This is the span's title">A span element</span> 
 
<img src="http://placekitten.com/g/250/250" title="A kitten." /> 
 
<input title="This is an input element's title." value="This input has a title" />

Odniesienia:

• Conditional ('ternary') operator.
• document.createElement().
• document.querySelectorAll().
• Element.classList.
• in operator.
• Node.cloneNode().
• Node.nextSibling.
• Node.parentNode.
• parseFloat().
• typeof.

Answer 5

Obsługa atrybutu title jest zależna od przeglądarki i nie zdefiniowano żadnych interfejsów API do sterowania nim, jeszcze mniej określonych w specyfikacji.Obejmuje to opóźnienie, czas wyświetlania, użytą czcionkę, rozmiar czcionki itp.

Istnieją inne techniki, które można stosować zamiast atrybutu title. Niektóre z nich zostały wymienione w innych odpowiedziach. Zauważ, że proste "podpowiedzi CSS" mogą być implementowane w czystym CSS raczej prosto i elastycznie. Podczas korzystania z tych technik dane, które mają być wyświetlane, mają zwykle atrybut , a nie w atrybucie title, ponieważ obsługa jest zależna od przeglądarki, więc istnieje ryzyko, że Twój specjalny komunikat z podpowiedziami będzie wyglądał następująco:. Mimo że można zapobiec temu ostatniemu, gdy włączona jest obsługa skryptów, łatwiej jest użyć atrybutu, który nie ma domyślnego wpływu na nic, takiego jak data-title=... lub data-tooltip=....

Answer 6

tacy to z box-shadow i tablicy border:

$('a').hover(function(e){ 

    title = $(this).attr('alt'); 
    $(this).append('<span>'+title+'</span>') 


}, 
function(e){ 
    $('span', this).remove(); 


}); 

http://jsfiddle.net/1z3catx3/112/