Author Topic: Problems with a jQuery Plugin (Read 3862 times)

Alberto · « **on:** September 08, 2017, 05:05:25 AM »

Hi, Im using a jQuery For Adding Notes and Markers To An Image
Icould make it work ok but Im still have a problem with the Tooltips
Im using the same code js and css as the examples but my Tooltips are "tranparents" while in the example it has a white backgound.
Please see attached images.

Is there any clashing with NT js or css?
Ive tried to look at the toolstip properties with firebug but did not find anything about tooltips.

This is the HEAD of the page N10generated:

<!DOCTYPE html><html class="nt-html no-js">
<head>
<title>reuma</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="/themes/redmond/theme.css?c=1" rel="stylesheet" />
<link href="/styles/armi.css?c=1" rel="stylesheet"/>
<link href="/styles/chrome.css?c=1" rel="stylesheet"/>
      <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" media="screen">
      <style type="text/css" media="all">@import "lib/imgNotes.css";</style>
      <script type="text/javascript" src="lib/jquery-1.12.4.min.js"></script>
      <script type="text/javascript" src="lib/jquery-ui.min.js"></script>
      <script type="text/javascript" src="lib/jquery-mousewhee.js"></script>
      <script type="text/javascript" src="lib/hammer.min.js"></script>
      <script type="text/javascript" src="lib/jquery.hammer.js"></script>
      <script type="text/javascript" src="lib/imgViewer.js"></script>
      <script type="text/javascript" src="lib/imgNotes.js"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
</head>

And this is the tooltip part of the css:

/* Tooltip container */
.tooltip {
   position: relative;
   display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
   visibility: visible;
   width: 180px;
   background-color: white;
   color: #000;
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;
   position: absolute;
   z-index: 1;
   bottom: 7px;
   left: 50%;
   margin-left: -90px;
}
.tooltip .tooltiptext::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -7px;
   border-width: 7px;
   border-style: solid;
   border-color: white transparent transparent transparent;
}

Any help please.
Thanks

Alberto · « **Reply #1 on:** September 09, 2017, 07:57:31 AM »

Bruce, its up, try this:

http://www.doctoranyplace.com/ImageMark

If you hover the 1 mark the tip is transparent.

Im using the same as this demo:

http://www.doctoranyplace.com/imgNotes-master/docs/basic_editor.html

where the tooltip background is white.

Thanks

Bruce · « **Reply #2 on:** September 10, 2017, 10:34:41 PM »

I had a look at the page. Apparently you're using some JavaScript tooltip on the page.
That JavaScript adds, and removes the tip DIV completely, not just hiding it as some do.
that makes it tricky to inspect.

It's some sort of Opacity setting on the background that makes it somewhat transparent.

My next recommendation would be to tweak the JavaScript so it "doesn't get deleted" - then it would be easier to inspect.

cheers
Bruce

NetTalk Central

Author Topic: Problems with a jQuery Plugin (Read 3862 times)

Alberto

Problems with a jQuery Plugin

Alberto

Re: Problems with a jQuery Plugin

Bruce

Re: Problems with a jQuery Plugin