Question

我有一张用coords映射的地图，以显示这样的工具提示：

＆＃13;

 //A
<LinearLayout

    android:onClick="clickedOnRecordLayout"
    android:layout_marginTop="@dimen/record_layout_top_margin"
    android:id="@+id/record_button_layout"
    android:gravity="center"
    android:elevation="@dimen/elevation_of_record_button"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:background="@drawable/red_circle_drawable"
    android:layout_width="@dimen/radius_of_record_button"
    android:layout_height="@dimen/radius_of_record_button">

    <ImageView
        android:id="@+id/record_image"
        android:src="@drawable/ic_microphone"
        android:layout_width="@dimen/record_image_dimen"
        android:layout_height="@dimen/record_image_dimen" />
</LinearLayout>

 //B - initially its visibility is gone
<LinearLayout
    android:onClick="clickedOnStartedRecordingLayout"
    android:visibility="gone"
    android:layout_marginTop="@dimen/record_layout_top_margin"
    android:id="@+id/started_button_layout"
    android:gravity="center"
    android:elevation="@dimen/elevation_of_record_button"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:background="@drawable/red_circle_drawable"
    android:layout_width="@dimen/radius_of_record_button"
    android:layout_height="@dimen/radius_of_record_button">

    <ImageView
        android:id="@+id/stop_image"
        android:src="@drawable/ic_stop_recording"
        android:layout_width="@dimen/record_image_dimen"
        android:layout_height="@dimen/record_image_dimen" />
</LinearLayout>


//C
<TextView
    android:layout_marginTop="@dimen/tap_text_top_margin"
    app:layout_constraintTop_toBottomOf="@id/record_button_layout"
    android:id="@+id/tap_on_microphone_tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:text="@string/tap_to_start_message"
    android:textAlignment="center"
    android:textColor="@android:color/black"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@id/chronometer"
    app:layout_constraintHorizontal_bias="0.503"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

＆＃13;

var areas = document.getElementsByTagName('area');
var tooltip = document.getElementById('tooltip');
for (var i = 0; i < areas.length; i++) {
  areas[i].addEventListener("mouseenter", updateTooltip);
  areas[i].addEventListener("mouseleave", removeTooltip)
}

function updateTooltip() {
  tooltip.style.display = "block"
  tooltip.innerHTML = this.getAttribute('data-text');
  var coordinates = this.getAttribute('coords').split(',')
  tooltip.style.left = coordinates[0] + 'px';
  tooltip.style.top = coordinates[coordinates.length - 1] + 'px';
}

function removeTooltip() {
  tooltip.style.display = "none"
}

＆＃13;

.tooltip {
  position: absolute;
  z-index: 9999;
  border: 1px solid black;
  min-width: 100px;
  max-width: 150px;
  background: white;
}

area {
  position: relative;
}

.parent {
  position: relative;
}

＆＃13;

正如你在鼠标悬停中看到的，它显示了一些工具提示，问题是在美国和墨西哥工具提示很多，有人知道如何解决它？此致

Answer 1

这是因为一旦工具提示弹出，鼠标现在就在工具提示上，这会触发您注册的mouseleave事件。您可以通过在工具提示中添加css属性pointer-events:none来阻止此操作，以防止它触发事件。

我在下面修改了你的例子！

var areas = document.getElementsByTagName('area');
var tooltip = document.getElementById('tooltip');
for (var i = 0; i < areas.length; i++) {
  areas[i].addEventListener("mouseenter", updateTooltip);
  areas[i].addEventListener("mouseleave", removeTooltip)
}

function updateTooltip() {
  tooltip.style.display = "block"
  tooltip.innerHTML = this.getAttribute('data-text');
  var coordinates = this.getAttribute('coords').split(',')
  tooltip.style.left = coordinates[0] + 'px';
  tooltip.style.top = coordinates[coordinates.length - 1] + 'px';
}

function removeTooltip() {
  tooltip.style.display = "none"
}

.tooltip {
  position: absolute;
  z-index: 9999;
  border: 1px solid black;
  min-width: 100px;
  max-width: 150px;
  background: white;
  
  /* ADDED */
  pointer-events:none;
}

area {
  position: relative;
}

.parent {
  position: relative;
}

<div class="parent">
  <img id="mapImage" src="https://i.imgur.com/Y7HuHDQ.png" usemap="#image-map">

  <map name="image-map">

            <area target="" data-text="USA Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="USA" title="USA" href="" coords="110,140,182,141,186,148,198,146,198,140,214,139,224,134,234,143,221,150,213,154,205,156,205,170,199,174,194,181,193,188,162,182,158,171,149,173,145,179,141,170,124,168,121,173,112,168,105,158" shape="poly">
            
             <area target="" data-text="Mexico Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173"  alt="MEXICO" title="MEXICO" href="" coords="124,172,137,171,141,178,152,173,160,181,162,204,179,199,179,211,157,212,173,216,146,204,136,196,125,188" shape="poly">
             
             <area target="" data-text="Japan Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173"  alt="JAPAN" title="JAPAN" href="" coords="705,106,716,106,721,146,687,184,667,175" shape="poly">
             
             <area target="" data-text="Germany Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173"  alt="GERMANY" title="GERMANY" href="" coords="418,111,436,108,433,124,418,124" shape="poly">
          <div class="tooltip" id="tooltip"></div>   
    </map>

</div>

鼠标悬停事件中的工具提示

1 个答案: