Ways to display title attributes when focused using jQuery?

Typically, title attributes in all browsers only appear when the mouse hovers over them. I am looking to also display them when users are focused on them via keyboard navigation. Unfortunately, without using JavaScript, this cannot be achieved solely through HTML and CSS.

In my projects, I often rely on jQuery for JavaScript tasks. Therefore, I am seeking a jQuery-based solution to display titles on focus.

<a title="this is title" href="#">Websites</a>

Update:

After extensive searching on Google, I came across a JavaScript solution that meets my needs.

Now, I am in search of a jQuery alternative for this functionality.

Check it out here:

jquerycssxhtmlaccessibility

Answer №1

JavaScript Snippet

$(function() {
        var xOffset = 10;
        var yOffset = 20;

        $("input").focus(function(e) {
            this.t = this.title;
            this.title = "";
            $("body").append("<span id='tooltip'>" + this.t + "</span>");
            $("#tooltip").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast");
        });

        $("input").blur(function(e) {
            this.title = this.t;
            $("#tooltip").remove();

            $("#tooltip").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");   
        });   
    });

Cascading Style Sheets

 #tooltip{
  position:absolute;
  border:1px solid #333;
  background:#f7f5d1;
  padding:2px 5px;
  color:#333;
  display:none;
  }

Sample HTML Input Element with Tooltip

 <input title="testing the focus tooltip" name="name" type="text"/>

Here's an example for a Link element as well:

$('a').click(function(e) {
    e.preventDefault();
  this.focus(function (e) {
      this.t = this.title;
      this.title = "";                    
    $("body").append("<span id='tooltip'>"+ this.t +"</span>");
    $("#tooltip")
      .css("top",(e.pageY - xOffset) + "px")
      .css("left",(e.pageX + yOffset) + "px")
      .fadeIn("fast");    
    });
});

 <a title="fdsfsdfsd" href="javascript:;" >test a foucs</a>

Answer №2

If you're looking to implement tooltips in a consistent manner across different browsers, consider using plugins like qTip. It's unlikely that you can rely on the native tooltip behavior, but qTip offers a simple solution:

$('ul:last li.active').qtip({
   content: 'This is an active list element',
   show: 'mouseover',
   hide: 'mouseout'
})

It's worth noting that I'm unsure if qTip supports triggering multiple events simultaneously (such as mouseover and focus).

Answer №3

Suggest reaching out to the creator of Onfocus tooltips and requesting permission to utilize their code.

There is no requirement for jQuery as the code automatically enables tooltips for all document elements. However, if you wish to tooltip dynamically generated elements, you may need to make modifications to the script yourself.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can be taken to remove a server-side validation error message once the user has inputted the correct value?

I'm facing an issue with server-side validation messages on my form, which includes fields for Name, Mobile, Email, and Message. While JQuery validation works fine, clearing the error message after user input is causing a problem. Using AJAX to submi ...

phpjqueryjsonajaxhtml

Dynamic Email Design

Currently, I am working on coding an HTML email that needs to be optimized for perfect rendering on all mobile devices. While I have expertise in coding emails for desktop and ensuring compatibility with various email clients and browsers, the challenge no ...

htmlcssresponsive-designhtml-tablehtml-email

`The logo does not dim when the popup is displayed`

I'm currently experiencing an issue with pop-ups on my page - when they appear, they create a shade over all elements of the page except for my two logos and are displayed with a border around them. Here's what my page looks like before the popu ...

javascriptcssreactjsimagepopup

Automatically scrolling down a div as new content is added using XMLHTTPRequest.openConnection

https://jsfiddle.net/kv5gbamg/ - I created a jsfiddle to demonstrate the functionality of the system Essentially, I am seeking a way to automatically scroll the scrollbar to the bottom every time a new message is received. My system updates the div with ...

javascriptjqueryhtmlcss

The marriage of a sticky and floating navigation bar using the power of Bootstrap 4

I am currently designing a navigation bar inspired by the layout on the EA GAMES website. While it functions perfectly in Chrome, I am encountering significant display issues in Internet Explorer. Any suggestions on how to troubleshoot and resolve this pro ...

htmlcssinternet-explorerbootstrap-4navbar

A TypeError was encountered: Attempting to read the 'substr' property of an undefined variable

Recently, I encountered an issue while working on a script with jquery.min.js version 1.4. The problem arose when I had to upgrade the script to version 1.9.1. Uncaught TypeError: Can not read property 'substr' of undefined. I need assistance i ...

javascriptjquerysubstr

Tips for preventing the appearance of two horizontal scroll bars on Firefox

Greetings, I am having an issue with double horizontal scroll bars appearing in Firefox but not in Internet Explorer. When the content exceeds a certain limit, these scroll bars show up. Can someone please advise me on how to resolve this problem? Is ther ...

c#javascriptcss

Indicating a particular row with jQuery

I've created a snippet that functions correctly, but I'm looking to incorporate additional functionality and need guidance on how to do so. The current snippet effectively traverses each row, locates a specific cell, and performs some actions on ...

jquery

Automatically fill in a dropdown menu with options tailored to the content entered in a text box

A password reset form I've created includes a username field and a drop-down list for security questions below it. My goal is to have the drop-down list populate with the user's security questions from the database when they enter a valid userna ...

c#jqueryasp.net-mvcjsonasp.net-mvc-3

Embed an HTML element within a DIV container

How can I add an HTML tag such as <p> to wrap around the text "Search"? <button id="ihf-quicksearch-submit2" class="btn btn-lg btn-block btn-primary btn-form-submit ihf-main-search-form-submit" type="submit"> Search </button> I am looki ...

jqueryhtmlcss

jQuery Extends the loop with the picture

I currently have an animation that goes from the bottom to the top but I want it to loop smoothly without abruptly starting over. Is there any way to achieve this? JavaScript Code var ticker = $('#ticker'); var container = $('#ticker > ...

jqueryanimation

Axis Labels for x and y in Flot Chart

Have you ever wondered if it's possible to display titles for the x and y axes on a Flot graph? Take a look at the following code snippet: $.plot($("#placeholder_1w"), [d], { series: { lines: { show: true, fill: false, fillColor: "red" } ...

jquerygraphflot

The curious case of jQuery.parseJSON() failing to decode a seemingly valid Json string on a Windows-based server

I am currently running a WordPress JavaScript function code on a Linux server that also includes a PHP function called "get_form_data". jQuery.ajax({ type: "POST", url: MyAjax.ajaxurl, data: {action: "get_fo ...

javascriptjqueryjsonwordpressiis

Having problems getting my fixed header to work on my datatable. What could be the

Struggling to make my data table Thead sticky? I attempted using position: fixed;, top: 0; with CSS but it only worked in Firefox, not Chrome, Edge, or Opera. Here is an excerpt of my Ajax code: "stateSave": false, "orderCellsTop&quo ...

javascriptjqueryajaxdatatable

Display/Modify HTML form

Looking for advice on how to create an interactive HTML form that displays data and allows users to edit it by clicking 'Edit' before submitting changes. Any suggestions on how to implement this functionality? ...

javascriptjqueryhtmlwebforms

The onchange event for the input type=file is failing to trigger on Google Chrome and Firefox

Update: Solved: http://jsfiddle.net/TmUmG/230/ Original question: I am facing an issue with handling image/logo upload alongside a hidden input type=file: <form class="image fit" id="theuploadform"> <input title="click me to chan ...

javascriptjqueryhtmlgoogle-chrome

Tips for achieving jQuery form submission with Ajax functionality

Currently in my Java application, I am submitting a form using JQuery. Below is the JSP code snippet: <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> ...

javajqueryajaxjspspring-mvc

Converting a JSON object into a format suitable for transmission through AJAX requests

I am attempting to transmit data in a JSobject via AJAX using jQuery. Below is the json object: var cookieData = { 'land' : document.URL, 'ref' : document.referrer }; The object is then stored in a cookie... throu ...

javascriptphpjqueryajax

Modify the color scheme of an HTML webpage

Looking to enhance my HTML page with a new feature. The page is responsive and currently using Bootstrap CSS and JS. My goal is to allow users to change the color of the page dynamically by selecting a background or text color. Check out this example link ...

javascriptjqueryhtmlcssplugins

Increase the size of a div to equal the combined width of two divs located directly below it

I need help aligning 3 divs so that the top div stretches to match the width of the bottom 2 divs combined. Here is an image showing the expected div positioning. I attempted to use display: table-row for the divs. <div id="main_div" style="display: ta ...

htmlcss