I want show title in circle tag

Question

I have a circle tag HTML5.

When i add a tag title and hover it, it show title.

But, i add tag title by jquery, it not show title.

This is my code :

 <circle class="visible" style="fill: blue" cx="900" cy="350" r="6">
     <!--<title>DeviceB|2015/09/01 24:27</title> ( When i add title by jquery and it show title)--> 
</circle>

<script type="text/javascript">
        $(document).ready(function () {
            $('circle').click(function (e) {
                $(this).append('<title>DeviceB|2015/09/01 24:27</title>');
            });
        });
</script>

It would be better if you can create a jsfiddle for this. A suggestion can be to use class 'visible' instead of 'this' before append. — shumana chowdhury, Sep 06 '15 at 07:48
Your question is unclear. A circle element -- are you intending to use SVG? — markE, Sep 06 '15 at 15:59

Daniel Cheung · Answer 1 · 2015-09-06T07:53:32.520

0

The <title> tag is meant for usage in <head> to show the title of the webpage in the browser tab in modern browsers and in window frame in older browsers.

Otherwise, the attribute title="" is used in the main document for a tooltip of the description of the hovered element.

Try adding other elements instead, like: <h1>, <span> for a semantic webpage.

edited Sep 06 '15 at 07:53

answered Sep 06 '15 at 07:47

Daniel Cheung

4,779
1
30
63

score 0 · Answer 2 · answered Sep 06 '15 at 08:11

There is a misconception in your code. A structural document title (you more likely want that rather than a bouncing or changing title) is set with a <title> tag inside a <head> tag. The user won't expect the document title to change after it's fully loaded.

However, if you really want to change the title at runtime, you may access it with document.title. Also, you should save your device name somewhere easy to control. For example:

HTML

<input type="hidden" id="device_name" value="DeviceB-FooBar-Barbarian-Etc" />

Then :

JavaScript

$(document).ready(function() {
   $('circle').click(function(e) {
      document.title = $('#device-name').val();
   });
});

Hope this helps and good luck!

score 0 · Answer 3 · answered Aug 24 '22 at 19:40

The title tag is allowed inside svg elements and acts as a tooltip on mouseover (TITLE — the SVG accessible name element

My understanding is the svg title must be created in an svg namespace for it to work properly (and keep it separate from the HTML tag of the same name). For completeness sake, I've included working code for both JQuery and JavaScript.

Also helpful What is jQuery for Document.createElementNS()?

//Assign svg namespace - required
const svgns = "http://www.w3.org/2000/svg";

//Click the blue circle, then mouseover for the <TITLE>/tooltip
//JQuery version
$(document).ready(function() {
  $('#c2').click(function() {
    //Create the new title element
    t = $(document.createElementNS(svgns, 'title'));
    //Assign a value to the text between the title tags
    $(t).html("TITLE (i.e. svg tooltip) created by JQuery");
    //Append it as a child of the svg circle which was clicked
    $(this).append(t);
  });
});

//Plain JavaScript version
//Click the red circle, then mouseover for the  <TITLE>/tooltip
function addTitle(el) {
  //Create the new title element
  t = document.createElementNS(svgns, 'title');
  //Assign a value to the text between the title tags
  t.innerHTML = 'TITLE (i.e. svg tooltip) created by JS';
  //Append it as a child of the svg circle which was clicked
  el.appendChild(t);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg>
<circle id="c1" style="fill: red"  cx="25" cy="25" r="20" onclick="addTitle(this);"/>
<circle id="c2" style="fill: blue" cx="75" cy="25" r="20" />
</svg>
<br /> Click red circle, then mouseover for title created by JS<br /> Click blue circle, then mouseover for title created by JQuery<br />

I want show title in circle tag

3 Answers3