Discover the magic of creating a jQuery tooltip using the HTML title attribute

I have been experimenting with the jQuery Tooltip from Bootstrap, which comes with additional attributes:

<a rel="tooltip" data-placement="right" data-original-title="Hello" href="#">Tooltip Example</a>

However, I encountered an issue because I use rel="nofollow" on many URLs where I also want to implement tooltips, and it seems they cannot work together.

Furthermore, I am looking for a graceful alternative for users who disable JavaScript in their browsers.

I am curious if there is a way to configure jQuery Tooltip to recognize the title="" attribute as data-original-title, and set a default preset for data-placement.

Here is a link to the fiddle: http://jsfiddle.net/FhGT3/

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Absolutely! You can definitely add a tooltip by including title="" in your code.

<a rel="tooltip" data-placement="right" title="my title" 
data-original-title="Hello" href="#">Tooltip Example</a>

Check out this example:

http://jsfiddle.net/sunnykumar08/FhGT3/4/

Regarding your second question: Yes, you have the option to set a default preset for data-placement. Just specify "data-placement:'

Thank you!

Answer №2

If you want to directly call tool tips, simply assign the class runtooltip to all the <a> tags you wish to have tool tips displayed on.

<a href="runtooltip" class="runtooltip" rel="nofolow" title="My Tip!">Something</a>

Right before the closing </body> tag in your HTML file, include the following script:

<script>
$('.runtooltip').each(function () {
    var $this = $(this); 
    var options = {
        placement: 'top'
    }
    $this.tooltip();
});
</script>

To view a working example, check out the jsfiddle link provided: http://jsfiddle.net/8gQ7L/

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

Storing a URL as a unique identifier within Chrome's local storage repository

I am facing an issue with storing a list of values in Chrome's local storage for a Chrome extension. I am trying to use the URL as the key in the key-value store, but for some reason, the set() function fails when using a URL as a key. Surprisingly, w ...

javascriptgoogle-chrome-extension

Transmit JSON data from socket.io client to Vue.js Component

Just like the issue mentioned here, I am facing difficulty in displaying socket.io-client data on a Vue.js component. Despite logging correctly to the console, the data is not showing on the page. Unlike the referenced case which dealt with an array, my da ...

javascriptnode.jsvue.jssocket.io

when webpack loads the bundle.js file, the mime type is converted to text/html

I'm currently working on implementing server side rendering for an application using react-redux and express for the server. We are also utilizing webpack to bundle our assets. To get started, I referred to the following documentation: https://redux ...

javascriptexpressreact-reduxserver-side-renderingserverside-javascript

What is the best way to horizontally align a DIV element in the center?

Having trouble centering an entire DIV on the page? Just started learning HTML, CSS, JS, and BOOTSTRAP. My question is how can I align all rows in the middle of the page. Check out my current code below and see how I want it to look: https://i.sstatic.net ...

htmlcssbootstrap-4

Is it possible to refresh an iframe with PHP once a certain condition is satisfied?

I have a situation with two pages - one is my PHP script and the other is an HTML page containing two iframes. > <html> > > <iframe name=1></iframe> <iframe name=2></iframe> > > </html> Currently, ifram ...

javascriptphp

The precision of the css function in jQuery

Possible Duplicate: jQuery and setting margin using jQuery In the HTML snippet below, I have set margins for a paragraph element to center it: <p style="margin-left:auto; margin-right:auto; width:200px;">Hello</p> After that, I attempted ...

javascriptjquery

Navigating a sortable list using jQuery

I have integrated the "sortable" script from on my web application to create a sortable list of items. While the sorting functionality works perfectly, I now need to update my server with the new order whenever changes are made. To capture the sorting ev ...

javascriptjquery

Child div within a parent div with absolute positioning does not extend to the full height of the webpage

I am currently facing an issue with a bug in my project that I am working on. The mobile menu is not taking the full height of the viewport when the screen size is less than 768px, even though it has been set to 100%. It only becomes visible when toggled ...

htmlcsscss-position

Transferring data and parameters between the Client-Side and Server-Side

I am currently working on setting up an express.js server, but I am struggling to figure out how to send and receive data effectively. Specifically, I have an input field where users can enter their email addresses. I want this email address to be sent to ...

javascriptnode.jsajaxexpressserver

I have attempted every possible solution to identify the reason behind this recurring error. Specifically, I keep encountering a CastError when trying to convert a

Struggling to figure out why this error keeps happening. It's so frustrating! I've been attempting to eliminate the cloudinary upload feature from my website. This should allow users to post on my blog without having to upload an image. Howeve ...

javascriptnode.jsreactjsmongodbmongoose

Creating a unique JavaScript script that gradually adjusts the background color using the setTimeout() function

Is there a way to create a function that continuously changes the background color every 15 seconds by picking colors from an array that starts over once all colors have been used, without having the function run just one time? $(document).ready(() => ...

javascriptjquerycss

What is the best way to adjust the responsiveness of my AppDrag page for mobile optimization?

My landing page is all set up, but I'm looking to tweak the font sizes and spacing for mobile users. Can these changes be made using design tools instead of digging into the code? ...

csscontent-management-system

Browsing across pages seamlessly without the need to refresh the browser

I need help with making my admin panel built using Bootstrap and integrated with Laravel navigate through tabs without refreshing the browser. Can anyone provide guidance on how to modify the code to achieve this functionality? You can check out the admin ...

javascripthtmlcsslaravelbootstrap-4

Javascript is utilized to populate text within a div, although the animation is exclusively applied to the initial text

I am currently working on designing a landing page that showcases a dynamic display of rotating texts with a typewriter-like animation effect. While I have successfully implemented the animation for the first text, I am facing an issue where the subsequent ...

javascripthtmlcss

Loading JW Player inside a "pop-up window"

My query pertains to the implementation of FancyBox version on this stackoverflow post: http://stackoverflow.com/questions/8221253/loading-jw-player-inside-of-fancybox Specifically for this inquiry, I am seeking recommendations for the following situation ...

jquerylightboxjwplayer

Tips for verifying the contents of a textbox with the help of a Bootstrap

I am still learning javascript and I want to make a banner appear if the textbox is empty, but it's not working. How can I use bootstrap banners to create an alert? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&g ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal

bing translator API: the variable text is translated with no content

I'm encountering an issue while working with javascript and PHP. The PHP code seems to run fine until it reaches the $curlResponse variable. From there onwards, all the subsequent variables ($xmlObj, $translatedStr, $translatedText) appear to be empty ...

javascriptphplanguage-translationbing-translator-api

What is causing the file to automatically insert white space whenever I insert an image?

Working on a Bootstrap 4 website with three images inside a .row div, I encountered an issue. To ensure all images have the same height, I created a custom class setting height: 20% and width: auto. Though the images display as desired, there is extra spac ...

htmlcssbootstrap-4

How can I ensure consistency in style and components across various HTML files while allowing for unique body content?

I'm new to web development and I'm curious about the best way to create multiple pages with the same components (header, sidebar, footer) but different content. I've seen suggestions for using PHP includes and HTML imports. Let's take ...

htmldjango

What methods are most effective when utilizing imports to bring in components?

Efficiency in Component Imports --Today, let's delve into the topic of efficiency when importing components. Let's compare 2 methods of importing components: Method 1: import { Accordion, Button, Modal } from 'react-bootstrap'; Meth ...

javascriptreactjsangularvue.jsnext.js