Home forums Using CanvasJS How to fix the tooltip when clicking on a datapoint?

This topic contains 4 replies, has 2 voices, and was last updated by  James 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #23375

    James
    Member

    Dear CanvasJS team,

    As mentioned in the title.

    I’d like to click on a datapoint and fix the tooltip so that I can click the hyperlink in it.
    And the second question is that is it possible to copy the text in the tooltip?

    Please help me with it.
    Thanks in advance.

    #23393

    Priyanka M S
    Member

    @james,

    I’d like to click on a datapoint and fix the tooltip so that I can click the hyperlink in it

    Please take a look at the second example on this page for adding hyperlinks in toolTip.

    And the second question is that is it possible to copy the text in the tooltip?

    You can add the below style to canvasjs-chart-tooltip class to enable the user selection for toolTip content.

    .canvasjs-chart-tooltip * {
      pointer-events: auto !important;
      -webkit-user-select: auto !important; /* Safari 3.1+ */
      -moz-user-select: auto !important; /* Firefox 2+ */
      -ms-user-select: auto !important; /* IE 10+ */
      user-select: auto !important; /* Standard syntax */
    }

    __
    Priyanka M S
    Team CanvasJS

    #23399

    James
    Member

    Dear Ms. Priyanka,

    Sorry for making you misunderstand what I mean.
    Please check following link JSFiddle

    The problem is that the tooltip moves constantly so that I’m not able to click the hyperlink on it.
    Do you have any advice for me?

    You can add the below style to canvasjs-chart-tooltip class to enable the user selection for toolTip content.

    
    .canvasjs-chart-tooltip * {
      pointer-events: auto !important;
      -webkit-user-select: auto !important; /* Safari 3.1+ */
      -moz-user-select: auto !important; /* Firefox 2+ */
      -ms-user-select: auto !important; /* IE 10+ */
      user-select: auto !important; /* Standard syntax */
    }
    

    Thank you for response, I’ll try this after I can fix the tooltip.

    • This reply was modified 1 week ago by  James.
    #23402

    Priyanka M S
    Member

    @james,

    You can fix the toolTip on click of dataPoint by setting top and left for toolTip container as shown in this updated JSFiddle, which also allows you to select the tooTip content and click the link present in toolTip.
    __
    Priyanka M S
    Team CanvasJS

    #23415

    James
    Member

    Dear Ms Priyanka,

    Thank you for taking the time to answer my question.
    This is exactly what I need, thank you so much.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.