Bootstrap 3 - How to change the hyperlink title text showing as tooltip using javascript/jquery?


Tags: javascript,jquery,html,css,twitter-bootstrap

Problem :

I am trying to change the hyperlink title using javascript/jquery when the link is clicked. HTML

<a 
        href="javascript:addRss('234');" 
        class="btn btn-success" 
        title="Add content to Personal RSS" 
        id="addRssbtn" 
        data-toggle="tooltip" >
            <i class="fa fa-rss fa-lg"></i> 
        </a>

CSS

@import url("http://netdna.bootstrapcdn.com/bootswatch/3.1.1/cerulean/bootstrap.min.css");
@import url("http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css");
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css");

JAVASCRIPT

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


function addRss(hash){
        $("#addRssbtn").attr("class", "btn btn-success active");
        $("#addRssbtn").attr("title", "Remove content from Personal RSS");
        $("#addRssbtn").attr("href", "javascript:unaddRss(" + hash + ");");

//some other post data stuff
};

the title gets changed and shows too, only if i am not using

data-toggle="tooltip"

so how can i make the data-toggle="tooltip" to show the new changed title as a tooltip when the link is clicked ?

http://jsfiddle.net/h5kKa/

above code is working except the new tooltip on my pc but not on jsfiddle.



Solution :

Update the tooltip using the fixTitle option.

$("#addRssbtn").attr("title", "Remove content from Personal RSS")

Becomes

$("#addRssbtn").attr("title", "Remove content from Personal RSS").tooltip('fixTitle');

You can add .tooltip('show'); to show the tooltip straight after:

$("#addRssbtn").attr("title", "Remove content from Personal RSS").tooltip('fixTitle').tooltip('show');

http://jsfiddle.net/h5kKa/2/


    CSS Howto..

    How to specify multiple hover event targets in CSS?

    How to add lines to
  • elemtents
  • How to change the background colour of a QWidget inside QStackedWidget using css?

    Multiple buttons in CSS + Button with an image not showing properly

    Stop CSS & Jquery Slideshow from looping

    JavaFX: How do I set a Background Image in code?

    How to get CSS or XPath locator from a button class

    How do I use css transitions to scale an image and move it at the same time?

    How do I show a background image in the first part of a page and make it cover 100% of the visible part of the screen?

    How to use css to crop images from left and right without knowing dimensions

    How to use JS/Jquery to replaces repeated CSS styles - Nested List

    How to set angular json model into css

    boostrap menu active page dont show style

    How do I get the ID of a JQuery item mid-function?

    CSS how to make special div shape

    How to create a Vertical Strikethrough in CSS?

    how to add items into a CSS based text rotator (similar to news ticker)

    How to control number of items per row using media queries in Flexbox?

    How to make a background text appear under youtube video?

    how do I give a div a responsive height

    How to apply CSS changes for the last

    element of the 3rd div class span8

    How to style object when the user clicks it

    How can I apply CSS selector to attribute values being case sensitive?

    How to make all elements in one line?

    Css how to create navigation bar

    how to get this modal window to work correctly?

    How do I align this icon while having the input take 100% width?

    How to position a css radial gradient to the top left responsively?

    How to remove space between bannner and content in wordpress theme?

    How to align brand title and links left in Bootstrap navbar?