How to make a word bold in a text mentioned in bootstrap tooltip CSS/Jquery


Tags: jquery,css,twitter-bootstrap

Problem :

I am trying to show a bootstrap tooltip on hover over an image. I have a text in that tooltip that i need to make it bold.

I tried this from the mentioned source, but didnt work form me..

  <button class="infoTipsBox" type ="button" data-toggle="tooltip" data-placement="right"data-original-title='<b>big tooltip</b>'>      
  </button>

Js:

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

What im i doing wrong?? In the above text in the title attribute, I am trying to make the "bootstrap tooltip" in bold font and rest in normal font. How can i achieve this?



Solution :

As you can see in Bootstrap' official documnetation for tooltip

Name    |    Type       |    default  |    Description
----------------------------------------------------------------------------
html    |    boolean    |    false    |    Insert html into the tooltip. 
                                           If false, jquery's text method 
                                           will be used to insert content 
                                           into the dom. Use text if you're 
                                           worried about XSS attacks.

so, add data-html="true" to your tooltip and this will enable HTML in your tooltip


    CSS Howto..

    How to create a code block on website

    Css How to override

    [closed]

    CSS height, How to get it to go around inner divs

    How to remove the empty space between divs in CSS?

    How to show a low resolution pictures when downloading high resolution? [closed]

    How to create a button to every list item which opens a menu over it?

    CSS: How to do image change on rollover

    How to create a 3 section's in a row inside the colophon footer (wordpress)

    how to tag multiple elements? [closed]

    how to make the file input field wrap?

    How to maintain hover state even when mouseout of main drop down link

    How can I specify relative positioning in HTML?

    How to Implement this UI with CSS [closed]

    How to place the same image at the top and at the bottom of the same column?

    CSS how to make an element fade in and then fade out?

    css - I've got a nested floating div, how do I get it to fill the entire 100%?

    How to find address of css and js files?

    Is it possible to apply css transitions on svg nodes? If yes, how?

    How to use a global parent selector with CSS Modules

    How to make all borders the same color?

    How to create zebra-stripe CSS with TAL?

    How to set border's thickness in percentages?

    Using CSS to show gradient as well as an image

    How to implement padding-free sprites in css?

    How to have an asp.net ajax control automatically reference css files

    How to DRY up on SASS transitions with multiple elements?

    How to use only CSS to round my div tag area's corners?

    Using jquery to swap text, how to revert other text to original?

    How to toggle class using jquery if else statement?

    How do I center a set of JQuery Mobile radio buttons in the viewport?